Question

我有一个固定的全屏背景图片，我应用于html的css，而不是身体。我有一个黑色的覆盖层，不透明度降低，身体的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％，它会不断地填满屏幕。您现在可以再次在身体上设置背景，或者您想要的地方。

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

CSS全屏背景rgba overlay

1 个答案: