另一种选择是CSS Tricks方法，在它后面插入一个与原始元素相同大小的伪元素，以伪造我们正在寻找的不透明背景效果。有时需要为伪元素设置高度。

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

使用不透明度。99(小于1)创建z-index上下文，因此您不必担心全局z-index值。(试着删除它，看看下一个演示中父包装器的z-index为正会发生什么。) 如果你的元素已经有z索引，那么你不需要这个hack。

演示此技术。

另一种选择是CSS Tricks方法，在它后面插入一个与原始元素相同大小的伪元素，以伪造我们正在寻找的不透明背景效果。有时需要为伪元素设置高度。

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

我们可以通过使用rgba color来解决不透明度问题

例如"background-color: rgba(0,0,0,0.5)"

示例:

以前的Css:

 .login-card {
  // .... others CSS
  background-color: #121e1b;
  opacity: 0.5;
}

To :

 .login-card {
      // .... others CSS
      background-color: rgba(0, 0, 0, 0.5);
    }

如果你必须只设置项目符号的不透明度，为什么不直接在图像中设置alpha通道呢?顺便说一下，我不认为有一种方法可以通过css设置背景图像的不透明度而不改变整个元素(及其子元素)的不透明度。

只是为了补充以上..你可以使用alpha通道与新的颜色属性，例如。Rgba(0,0,0,0)好的，这是黑色的但不透明度为零所以作为父元素它不会影响子元素。这只适用于Chrome, FF, Safari和....我瘦O。

将你的十六进制颜色转换为RGBA