在以下示例中，仅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>您的代码实际上有效并且图像可见，但是您进行了设置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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句