DIV中的背景图像透明度[重复]答案

【问题标题】：Background image transparency in DIV [duplicate]DIV中的背景图像透明度[重复]
【发布时间】：2017-05-30 11:23:07
【问题描述】：

我正在尝试使背景图像透明（没有选项可以制作透明 PNG 或更轻的图像，图像经常更改）。

background: url(image.jpg) no-repeat center center / cover;
opacity: 0.2;

图像工作正常，但 DIV 内的所有内容也是透明的。我已经寻找解决方案，但似乎无法实施正确的解决方案。关于如何解决这个问题的任何指针？

【问题讨论】：

设置为container: background-color: rgba(0,0,0,0.5);并清除不透明度

标签： css background-image transparency

【解决方案1】：

在包装元素内的背景 div 上使用不透明度。

.page {
  position: relative;
  width: 100px;
  height: 100px;
}
.page::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background:  url('http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg');
  opacity: 0.2;
  z-index: -1;
}
.box {
  display: inline;
  background: red;
}

<div class="page">
  My page
  <div class="box">Red box</div>
</div>

【讨论】：

必须使用z-index: -0; 才能使其工作......但它完成了工作！谢谢。

【解决方案2】：

您可以将 CSS linear-gradient() 与 rgba() 一起使用。

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

&lt;div&gt;&lt;span&gt;Hello world.&lt;/span&gt;&lt;/div&gt;

jsFiddle

解释：

第一部分：linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 创建半透明的白色背景颜色。您可以根据需要在 0（完全透明）和 1（完全不透明）之间更改 alpha 参数。
第二部分：url("https://i.imgur.com/xnh5x47.jpg")是显示实际背景图片。
一起：background: linear-gradient(...), url(...); 创建多个背景，其中两个堆叠在一起，第一个覆盖第二个。

【讨论】：

那不是让图片上方的白色透明吗？
这会给浏览器渲染带来更多还是更少的压力？
@JanTeunis 我不认为有什么值得注意的，因为它是非常标准的 CSS3 东西，如果你愿意，你可以做一些测试。通过MDN了解更多信息。
@Ced 没错，但它实际上是白色的，带有一些透明度，这正是问题所要求的，当然您可以根据需要将其更改为深色。
谁知道 OP 在他的图像后面有什么，它可能不是纯空白的（它可能是另一个图像）。在任何情况下它都是有用的，我同意并且具有指导意义。赞成

【解决方案3】：

你可以使用伪元素

    div {
      width: 300px;
      height: 200px;
      color: green;
      position: relative;
    }

    div:before{
        background: url(https://i.imgur.com/xnh5x47.jpg);
        content: "";
        z-index: -1;
        position: absolute;
        opacity: 0.5;
        top: 0; bottom: 0; left: 0; right: 0;
        background-size: cover;
     }

&lt;div&gt; LOLOLOL &lt;/div&gt;

【讨论】：

必须使用z-index: -0; 才能使其工作......但它完成了工作！谢谢。