Question

我试图让背景图片透明（没有制作透明PNG或更亮图像的选项，图像经常更改）。

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

图像正常工作，但DIV内部的所有内容也是透明的。我已经找到了解决方案，但似乎无法实现正确的解决方案。关于如何修复它的任何指针？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<强> 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(...);创建多个背景，其中两个堆叠，第一个覆盖第二个。

Answer 2

在包装器元素内的背景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>

Answer 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>

DIV中的背景图像透明度

3 个答案: