Question

我正在尝试将图像放到整个屏幕上，并使用完全自动缩放和屏幕的全宽和高度，同时确保有一些不透明度值为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;
}

但是图像不适合整个屏幕，而且不透明度也导致不透明度也会应用于文本。

Answer 1

测试是.bodycontainer的子项，并且将保持不透明度值，您需要将其从另一个容器中删除。

检查我的代码：

＆＃13;

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

＆＃13;

<div class="main">
	<h2>This text </h2>
	<div class=bodycontainer> </div>
</div>

＆＃13;

全尺寸图像，不透明度和可见文本

1 个答案: