html - 设置页面背景图片不透明度

Question

如何将整个页面的背景图片不透明度设置为 0.4？

我试过

html { 
  background: url(img01.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

   opacity: 0.4;
   filter: alpha(opacity=40); /* For IE8 and earlier */
}

但它设置了页面上所有元素的不透明度，而我只想要 img01.jpg 的不透明度？？

Answer 1

在不更改图像的情况下，这就是我的做法。

使用fixed 或 absolute 定位的伪元素:

html:after {
    content : "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(http://dummyimage.com/1000x1000/000/fff.png); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

可以看到这个jsfiddle获取样本。