Question

我有整个页面的背景图像和内容div的另一个背景图像。我想要的是内容div的背景图像应该是半透明的，这样它下面的一些背景图像（对于整个页面）也应该是可见的。
我也尝试使用图像编辑器减少我的.png背景文件的不透明度，但它没有显示我下面的背景，而是图像刚刚变亮了。

Answer 1

使用伪元素

body {
  background-image: url(http://lorempixel.com/image_output/nature-q-c-1600-1600-10.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
div {
  width: 600px;
  height: 500px;
  position: relative;
}
div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://lorempixel.com/image_output/city-q-c-600-500-7.jpg);
  opacity: 0.5;
  z-index: -1;
}

<div>
  <h1>Heading Text</h1>
</div>

Answer 2

要使div透明，您可以使用：

.thediv{
    background-color: transparent
}

修改半透明：

.thediv{
  background:rgba(255,255,255,0.4);
}

Answer 3

HTML

<body>
    <div></div>
</body>

CSS

body {
  background-image: url(https://static.pexels.com/photos/24419/pexels-photo-24419-large.jpg);
  background-repeat: no-repeat;
}

div {
  width: 600px;
  height: 500px;
  background-image: url(https://static.pexels.com/photos/940/sky-sunset-sand-night-large.jpg);
  opacity: 0.5;
}

JSfiddle：https://jsfiddle.net/0jw6c79L/

使背景图像半透明

3 个答案: