css - 如何使用 CSS 获得具有半透明效果的整页背景图像？

Question

我正在寻找一种解决方案，以使用 CSS 获得具有半透明效果的整页背景图像。查看stackoverflow，我找到了使用以下方法的整页背景图像的解决方案：

background-image: url('background.jpg'); 
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

一种用于半透明效果，使用：

.watermark {
position:fixed;
}

.watermark:after {
    background: none no-repeat 0 0 rgba(255, 255, 255, 0.8);
    bottom: 0;
    content: " ";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

但没有人能同时解决这两个问题。我如何将这两种解决方案结合起来？

提前致谢

Answer 1

.image{
background-image: url('background.jpg'); 
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position:relative;
}
.watermark:after {
background-color:rgba(255, 255, 255, 0.8);
content:"";
left: 0;
position: absolute;
top: 0;
height:100%;
width:100%;
}