如何使用 CSS 设置 div 背景图像的不透明度或降低亮度

Question

在下面的示例中，仅显示background-color，但图像不可见。不透明度似乎也不起作用。

.my-container {
position: relative;
background-color: blue;
min-height: 100px;

}
.my-container:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg");
background-position: 100% center;
background-repeat: no-repeat;

-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

<div class="my-container">
<p>Contents</p>
<div>

Answer 1

您的代码实际上有效并且图像可见，但您设置了opacity: 0.1和background: blue，因此它几乎不可见。只需增加不透明度，也许background-color更改为更用户友好。

我清理了您的代码并将内容放在图像顶部。在您的示例中，内容具有图像叠加层，这使得文本更难看到。

.my-container {
position: relative;
background: blue;
height: 200px;
font-size:2rem;
color:#fff;
}
.my-container:before {
content: '';

position: absolute;
top:0;
right:0;
bottom:0;
left:0;

opacity: 0.6;

background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg");
background-position:center;
background-repeat: no-repeat;
background-size: cover;
}
#content{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
}

<div class="my-container">
<div id="content">CONTENT</div>
<div>

Answer 2

它似乎对我来说很好用。当我设置不透明度时，我可以看到图片：0.5;蓝色背景仍然存在。所以我建议提高你的不透明度 高于0.1。看看什么最适合你。

Answer 3

请使用 css 过滤器：亮度(80%(;而不是不透明度。

filter: brightness(50%);