Css 使背景图像半透明_Css - Fatal编程技术网

Css 使背景图像半透明

css

Css 使背景图像半透明,css,Css,我有一个用于整个页面的背景图像，另一个用于content div。我想要的是content div的背景图像应该是半透明的，这样它下面的一些背景图像（用于整个页面）也应该是可见的。我还尝试使用图像编辑器降低.png背景文件的不透明度，但它没有显示下面的背景，而是图像变亮了。要使div透明，可以使用： .thediv{ background-color: transparent } 编辑：半透明，带有： .thediv{ background:rgba(255,255,255,0.

我有一个用于整个页面的背景图像，另一个用于content div。我想要的是content div的背景图像应该是半透明的，这样它下面的一些背景图像（用于整个页面）也应该是可见的。

我还尝试使用图像编辑器降低.png背景文件的不透明度，但它没有显示下面的背景，而是图像变亮了。

要使div透明，可以使用：

.thediv{
    background-color: transparent
}

编辑：半透明，带有：

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

HTML

jsidle:

使用伪元素

正文{
背景图片：url(http://lorempixel.com/image_output/nature-q-c-1600-1600-10.jpg);
背景重复：无重复；
背景尺寸：封面；
}
div{
宽度：600px；
高度：500px；
位置：相对位置；
}
div：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景图片：url(http://lorempixel.com/image_output/city-q-c-600-500-7.jpg);
不透明度：0.5；
z指数：-1；
}


标题文本

您是否也设置了背景色？如果是，请将其删除。但这也会改变内部文本的不透明度，我不希望这样，但这也会改变内部文本的不透明度，我不希望这样。只是伪元素位于文本的顶部。用z索引修复了这个问题。

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

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