html - CSS全屏背景rgba叠加

Question

我有一个固定的全屏背景图像，我将其应用于 html 的 css，而不是正文。我在 body 的 CSS 中有一个不透明度较低的黑色覆盖层，因为当我尝试时它不起作用

background:rgba(0, 0, 0, 0.6), url(image.jpg);

我也试过不带逗号，但没有用。我已经将 height: 100% 设置为带有颜色覆盖的 body 并且它起作用了，直到我向下滚动，因为它使用了 100% 的屏幕高度但没有进一步。

我正在处理的页面是一个画廊，只有 1 或 2 张肖像/高大的图像，当它们向下延伸超过屏幕并且叠加层没有跟随时会导致问题。

如果没有简单的解决方法，我是否可以添加一些条件 javascript 代码或一些可以在仅查看这对图片时扩展主体高度的代码？

Answer 1

最好的办法是创建一个位于页面顶部的 div 以创建叠加层。请参阅下面代码段中的示例。

基本上 overlay div 是 fixed，因此即使在您滚动时它也会保持在 top: 0 中。因为它的高度和宽度都是 100%，所以它会不断填满屏幕。您现在可以再次在 body 上或任何您想要的地方设置背景。

.overlay {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
}
.content {
  height: 1000px;
  background: green;
}

<div class="overlay"></div>
<div class="content">Text</div>
<div class="content">Text</div>