背景图像不适合浏览器窗口的屏幕。背景图像仅覆盖屏幕的一部分，保持其纵横比。我希望背景图像覆盖它运行的整个屏幕。请帮助！
html
<div class="container">
<h1> GAME</h1>
<div class="color-overlay"></div>
</div>
css
.container {
background-size: cover;
background: #000 url(images/group11.jpg);
color: #fff;
background-repeat:no-repeat;
background-position:center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.color-overlay {
width: 100%;
height: 100%;
background: blue;
opacity: .6;
position: absolute;
}
问题是你先设置background-size:cover然后设置background。
设置后background（包括重复、大小、位置、图像等）background-size将被cover默认设置覆盖。
你要么设置background-size:cover 后，在background要么你将所有background的声明，你需要（颜色，重复，图像等）分开，或者声明的所有在一行中只使用background
见下文
.container {
background: #000 url(http://via.placeholder.com/350x150);
/* bg size after */
background-size: cover;
color: #fff;
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
height:100vh;
/* OR set all separately
background-image: url(http://via.placeholder.com/350x150);
background-color: #000;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
*/
/* OR set all in one line
background: url(http://via.placeholder.com/350x150) no-repeat scroll center center / cover #000;
*/
}
.color-overlay {
width: 100%;
height: 100%;
background: blue;
opacity: .6;
position: absolute;
}<div class="container">
<h1> GAME</h1>
<div class="color-overlay"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句