Html 设置页面背景图像不透明度

如何将整个页面的背景图像不透明度设置为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的不透明度？？？

你不能在背景图像上设置不透明度

相反，您可以：

使背景为半透明PNG，具有所需的不透明度级别。根据背景的大小，这可能不是一个很好的解决方案，因为PNG的文件大小占用空间比JPG大得多

如果透明度要覆盖纯色（即白色或黑色），可以使用

rgba（）

颜色在

background image

顶部添加纯色/平坦背景渐变，以模拟所需的不透明度（例如，如果希望背景图像具有60%的不透明度，请添加一个不透明度为40%的黑色平坦背景渐变，该渐变实际上不是顶部的渐变）

将您的

背景图像

添加到一个psuedo元素，如

：：after

，该元素绝对位于填充包含元素的位置，并操纵仅此图像的“假背景”层的

不透明度

---

在不改变图像的情况下，我会这样做

使用伪元素定位

固定
或
绝对
：

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;
}

您可以在示例中看到这一点。
当您在父类中使用不透明度时，它也会应用于父类和子类。因此您使用rgba颜色代码代替图像。
您使用的浏览器是什么？@user3739658 Firefox 30.0img01.jpg是html的背景或html中使用的图像。此主题与-可能相同皱褶