个人中心
gpt4 book ai didi

html - 在背景之上图层以填满整个屏幕

转载 作者：行者123 更新时间：2023-11-28 15:12:44 25 4
gpt4 key购买 nike

好的，所以我已经阅读了很多关于这个的 SO 问题和答案，查看了各种 JSFiddle 和 Codepen 示例，但似乎没有找到我想要的解决方案......

这是我遇到的一个例子:

https://jsfiddle.net/ts4t13hn/3/

这是我正在使用的 CSS 类:

.dark-layer{
  background-color: rgba(0,0,0,.6);
  height:100%;
  width:100%;
}

基本上，我希望 CSS 类“dark-layer”填充 100% 的屏幕(无论内容适合页面还是有更多内容并且必须向下滚动才能看到其余内容)。

在上面的 fiddle 示例中，没有足够的内容要求用户向下滚动，因此该层没有覆盖 100% 的屏幕。我找到的解决方案是给类 position:absolute - 这里的工作示例:https://jsfiddle.net/ts4t13hn/4/

但是，如果我现在添加更多内容导致溢出，图层不会继续填充屏幕，如下所示:https://jsfiddle.net/ts4t13hn/5/

各种信息建议设置 background-attachment:fixed 但我在 fiddle 和我的元素中尝试了这个，我看不出有什么区别。

如果我像第一个示例那样保留我的 CSS(即没有 position:absolute;)，只有当内容超出初始屏幕时，我才能得到所需的结果。

问题:有没有办法给 dark-layer 类 100% 的高度，并使其固定在视口(viewport)上，以便它始终覆盖背景图片(类似于 body 元素上的背景图片的工作方式)

最佳答案

不要用层包裹所有东西，把它空着放在那里。 

<div class="dark-layer"></div>

然后将其设置到固定位置。

.dark-layer {
    position: fixed;

html {
  height: 100%
}

body {
  background-image: url(https://images.pexels.com/photos/770151/pexels-photo-770151.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding: 0 auto;
  margin: 0 auto;
}

.dark-layer {
  background-color: rgba(0, 0, 0, .6);
  height: 100%;
  width: 100%;
  position: fixed;
}
<html>

<body>

  <head>
  </head>

  <div class="dark-layer"></div>
  <div class="container">
    <nav class="navbar navbar-expand-lg">
      <div class="container">
        <a class="navbar-brand text-light" href="#">
                        Logo
                    </a>

        <button class="navbar-toggler collapsed text-light" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    Expand
                    </button>

        <div class="navbar-collapse collapse mr-auto" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a href="#" class="nav-link text-light">Link 1</a></li>
            <li class="nav-item"><a href="#" class="nav-link text-light">Link 2</a></li>
            <li class="nav-item"><a href="#" class="nav-link text-light">Link 3</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>


  <div>
    <div class="container">
      <h1>
        Some header
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend tincidunt tellus, at ultrices erat bibendum a. Donec eget tortor tempus, dapibus eros fringilla, ultricies quam. Vivamus quis lorem leo. Pellentesque quis consequat enim. Pellentesque
        habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis odio mi, mattis nec venenatis tincidunt, egestas et ex. Nam dapibus egestas lacus, in vulputate lacus rutrum ac. Aliquam sollicitudin lacus in magna suscipit,
        quis imperdiet eros tristique. Nulla tristique eros eu nulla congue consequat. Proin suscipit dolor bibendum est convallis commodo. Mauris in dolor vel ipsum hendrerit convallis porta vel ipsum. Duis scelerisque bibendum ante vitae vehicula. Donec
        venenatis, orci eget dignissim porta, odio justo rhoncus sapien, sit amet tristique turpis eros a lectus.
      </p>
    </div>
    <h6 class="footer fixed-bottom text-center text-light">Some Footer</h6>
  </div>
</body>

</html>

关于html - 在背景之上图层以填满整个屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48132607/

25 4 0
文章推荐： javascript - 淡化路径标签中的颜色
文章推荐： html - 2x2 图像，每个图像上的文字叠加不同
文章推荐： html - h3 Bootstrap(Ionicons)上方的中心图标
文章推荐： html - 固定标题与我的横幅重叠
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com