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

Posted 2023-03-06

【中文标题】DIV中的背景图像透明度[重复]

【英文标题】：Background image transparency in DIV [duplicate]

【发布时间】：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);并清除不透明度

【参考方案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;

<div><span>Hello world.</span></div>

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;
     

<div> LOLOLOL </div>

【讨论】：

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