【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-09-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多