在背景上的图层填充整个屏幕

时间：2018-01-06 22:37:06

标签： html css bootstrap-4

好的，所以我已经阅读了很多关于这个问题的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％的屏幕（无论内容是否适合页面，或者有更多内容，还有一个必须向下滚动以查看其余内容）。

在上面的小提琴示例中，没有足够的内容要求用户向下滚动，因此图层不会覆盖100％的屏幕。我找到的解决方案是给出课程position:absolute - 这里的工作示例：https://jsfiddle.net/ts4t13hn/4/

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

各种信息建议设置background-attachment:fixed，但我在小提琴和我的项目中尝试了这一点，我认为没有区别。

如果我像第一个例子中那样离开我的CSS（即没有position:absolute;），只有当内容超过初始屏幕时，我才会得到所需的结果。

问题：有没有办法让dark-layer类100％高度并使其固定到视口，以便它始终覆盖背景图像（类似于如何在body元素上运行背景图像）

4 个答案:

答案 0 :(得分：0)

不要用图层包裹所有内容，只需将其放入空白处即可。 

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

答案 1 :(得分：0)

问题是背景不是覆盖整个身体（因为这个没有100％的高度）但是传播到html和根元素这就是图像覆盖整个屏幕的原因，而不是身体内部的图层。所以你需要确保你的身体也是全高的。

您可以在此处详细了解此行为：

What's the meaning of "propagated to the viewport" in the CSS spec?

顺便说一下，你可以简单地使用伪元素和body来避免为图层添加额外的标记，所以你可以这样：

＆＃13;
＆＃13; 
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;
  margin: 0 auto;
  padding-bottom:1px;
  position: relative;
  min-height: 100%;
}

body:before {
  content: "";
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}
＆＃13; 
<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>


<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<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>
</div>
<h6 class="footer fixed-bottom text-center text-light">Some Footer</h6>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

如果你要做的是在背景图像上设置一个半透明的深色背景，你根本不需要“暗层”，只需在body元素上设置堆叠背景并摆脱一切其他

body {
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
 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;
}

将纯色设置为渐变有些笨拙，但无论出于何种原因，我们无法真正在图像上设置纯色堆叠。 Here's a little explanation about it

您还可以通过在速记声明中设置所有其他背景属性来进一步改进该代码，我只是尝试从代码中尽可能少地进行更改

答案 3 :(得分：-1)

在CSS中执行此操作：

z-index: -1

z-index: 1;表示图像将向后移动一层。要继续前进，请尝试：{{1}}

相关问题
最新问题