CSS 全屏背景 rgba 覆盖答案

【问题标题】：CSS fullscreen background rgba overlayCSS 全屏背景 rgba 覆盖
【发布时间】：2016-10-31 19:55:26
【问题描述】：

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

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

我也尝试不使用逗号，但没有帮助。我已经将height: 100% 设置为body，并带有颜色叠加层，它可以工作，直到我向下滚动，因为它使用了 100% 的屏幕高度，但没有进一步。

我正在处理的页面是一个只有 1 或 2 张纵向/高大图像的画廊，当它们向下延伸到屏幕之外并且覆盖不跟随时会导致问题。

如果没有简单的解决方法，我可以添加一些有条件的 JavaScript 代码或在仅查看这几张图片时扩展身体高度的东西吗？

【问题讨论】：

标签： html css background overlay fullscreen

【解决方案1】：

最好的办法是创建一个位于页面顶部的 div 以创建叠加层。在下面的 sn-p 中查看我的示例。

基本上overlay div 是fixed，因此即使您滚动它也会保留在top: 0 中。由于它的高度和宽度都是 100%，它不断地填满屏幕。您现在可以再次将背景设置在身体上，或者您想要的任何位置。

.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>

【讨论】：