我想要一个带有叠加效果的背景图像。
参见：https://jsbin.com/giqadife/edit?html,css,output
叠加效果应始终为全屏尺寸 - 调整大小时也是如此。我首先使用：
html, body { min-height: 100%; }
// Background Image
body {
position: relative;
background-image: url("/_Resources/Static/Packages/VMP.Website/Images/Header/header_full.jpg");
background-position: top center;
background-repeat: no-repeat;
margin: 0px;
background-color: black !important;
}
// Colored overlay of Background Image
body::before {
position:absolute;
content: '';
background-color: rgba(44, 62, 80, 0.7);
min-width: 100%;
height: 100%;
z-index: -10;
}
所以我使用了
position:absolute;position:fixed;但这会迫使浏览器在每次滚动时重新渲染整个内容，因此这不是最佳选择。
还有其他选择吗？哪一种性能更好？
如果我们意见一致，这就是您要找的。 如果这解决了您的问题，请告诉我。
您应该将两个元素（图像和覆盖层）放置为绝对元素。 您可以使用 Overlay 类的 RGBA 属性的最后一个参数来设置不透明度。
它完全响应，符合您的问题。 这是一个小提琴
HTML
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="overlay"></div>
</body>
</html>
CSS
html, body { min-height: 100%; }
body {
padding: 0;
border: 0;
width:100%;
height:100%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: url("http://wallpapercave.com/wp/8fWGVfB.jpg");
background-position: top center;
background-repeat: no-repeat;
}
.overlay{
width:100%;
min-height:100%;
background-color: rgba(0,0,0,0.4);
position: absolute;
}
您可以做的是将
background-attachment: fixedbodybodyhtml,
body {
height: 100%;
}
body {
height: 1000px;
margin: 0;
background-image: url(http://hdwallpaper20.com/wp-content/uploads/2016/04/4k-wallpaper-15-ULTRA-HD-Collections-Yosemite-Valley-Snow-Sunset-4K-Ultra-HD-Desktop-Wallpaper-1024x576.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
body:after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}<body>
<div>Can be a div with some content</div>
</body>尝试将此代码添加到您的正文中：
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
如果有人正在寻找与我相同的东西，我想将其添加到池中。还没有彻底测试过，我不确定是否支持，但 CSS 网格已经存在了一段时间了。
我希望覆盖整个页面，而不需要覆盖层及其内容被固定，并且不必使用溢出-y：滚动。我还希望页面滚动能够像往常一样工作以显示整个页面，即使它被覆盖也是如此。我找到的解决方案是在主体上使用 CSS 网格来制作一列一行网格，然后将页面和覆盖层放置在该网格中的同一单元格中。 CSS 网格然后重叠单元格并且似乎也尊重 z-index。
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 100%;
height: 100px;
}
#page {
grid-column: 1 /2;
grid-row: 1 / 2;
}
.overlay {
display: flex;
justify-content: center;
background-color: rgba(100, 100, 100, 0.3);
width: 100%;
height: 100%;
grid-column: 1 / 2;
grid-row: 1/2;
z-index: 99999;
}
.overlay-content {
background-color: #fff;
display: flex;
justify-content: center;
width: 50%;
}<html>
<body>
<div id="page">Here is some example text on my page</div>
<div class="overlay"><div class="overlay-content">My overlay content</div></div>
</body>
</html>