我试图将图像放在整个屏幕上，并具有完整的自动尺寸，全宽度和屏幕高度，也确保有一定的不透明度值为0.6，以便我的文本是我尝试放在图像顶部应该是黑暗的。
这是代码：
<body>
<div class=bodycontainer> <h2>This text </h2> </div>
</body>
CSS代码：
div.bodycontainer {
background-image:url('../images/mainbackground.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
opacity:0.1;
}
，但图像不适合整个屏幕，并且不透明度会导致不透明度应用于文本。
测试是.bodycontainer的孩子，将保持不透明度值，您需要在另一个容器中删除它。
检查我的代码：
body {
margin: 0;
padding: 0;
}
.main {
position: relative;
}
div.bodycontainer {
height: 100vh;
background-image:url('http://via.placeholder.com/1200');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
opacity:0.3;
}
h2 {
position: absolute;
}<div class="main">
<h2>This text </h2>
<div class=bodycontainer> </div>
</div>