个人中心
gpt4 book ai didi

css - body::before 在前面 - 为什么？

转载 作者：行者123 更新时间：2023-11-28 16:30:53 25 4
gpt4 key购买 nike

JsBin:http://jsbin.com/wifayesole/2/edit?html,css 

body {
  position: relative;
  background-image: url("http://animaliaz-life.com/data_images/cat/cat8.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  margin: 0px;
  background-color: black;
}
body::before {
  position: absolute;
  content: '';
  background-color: rgba(44, 62, 80, 0.7);
  width: 100%;
  height: 100%;
}
#body-container {
  background-color: white !important;
  height: 2000px;
}
.container {
  border: 1px solid red;
}
header {
  border: 1px solid blue;
}
nav {
  margin: 100px 0px !important;
  border: 1px solid yellow;
}
.nav > li > a > img {
  width: 70px;
  height: 70px;
}
.nav {
  display: inline-block;
  text-align: center !important;
}
.navbar-brand {
  height: auto !important;
  padding-left: 0px !important;
}
.navbar-brand > img {
  height: 70px;
}
.icon-0 {
  background-color: #2ecc71;
}
.icon-1 {
  background-color: #3498db;
}
.icon-2 {
  background-color: #9b59b6;
}
.icon-3 {
  background-color: #f1c40f;
}
.icon-4 {
  background-color: #e74c3c;
}
.icon-5 {
  background-color: #f39c12;
}
.icon-6 {
  background-color: #34495e;
}
.icon-7 {
  background-color: #2ecc71;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<header>
  <!--   NAVIGATION   -->


  <!-- Fixed navbar -->
  <nav class="navbar navbar">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img src="/_Resources/Static/Packages/VMP.Website/Images/vmp_logo_text_white.png" alt="Logo">
        </a>
      </div>


      <div class="navbar-collapse collapse">

        <ul class="nav navbar-nav">


          <li class="normal dropdown">
            <a role="button" aria-expanded="true" data-toggle="dropdown" class="dropdown-toggle" href="/test-1.html">
              <img class="icon-0" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/0.png" alt="Verein" />
              <!--<span class="caret"></span>-->
            </a>
            <ul class="dropdown-menu" role="menu">

              <li class="normal"><a href="/test-1/test-sub.html">test sub</a>
              </li>

            </ul>
          </li>



          <li class="normal">
            <a href="/test-2.html">
              <img class="icon-1" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/1.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-3.html">
              <img class="icon-2" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/2.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-4.html">
              <img class="icon-3" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/3.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-5.html">
              <img class="icon-4" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/4.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-6.html">
              <img class="icon-5" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/5.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test.html">
              <img class="icon-6" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/6.png" alt="Verein" />
            </a>
          </li>


        </ul>
      </div>
      <!--/.nav-collapse -->


    </div>
  </nav>

</header>

<!--   CONTENT   -->
<div class="container" id="body-container">
  <div class="neos-contentcollection">
    <div class=" typo3-neos-nodetypes-text">
      <div>
        <p>This is the homepage</p>
      </div>
    </div>
    <div class=" typo3-neos-nodetypes-text">
      <div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
</div>

<!--    FOOTER     -->
<footer>
  <div class="container">
    <hr />

    <div class=" typo3-neos-nodetypes-text">
      <div></div>
    </div>
  </div>
</footer>

问题 1:彩色叠加层在导航后面但在主要内容区域前面。

我的解决方案:将 z-index 设置为 bod::before。但我认为这只是一个黑客。我该如何解决？

问题 2:如果我从 header 标记中删除 border，我会看到 body::before 得到一个 margin-top 之类的东西。

MySolution:只需添加例如margin-top: -100px; 或 body::before 的任何内容。我认为这只会使错误的实现以某种方式整体工作，而且不好。

谁能告诉我这里出了什么问题？

如果您编辑帖子并转发它，请确保分享快照(继续“分享”时的选项)

最佳答案

1) 你可以将 z-index:-1 设置为伪。

body background 将在 HTML background 中绘制，所以 body:before，仍然会站在它上面，而不是在 body 和它的内容之上。

为什么这行得通并且伪造没有被隐藏？

body 是 position:relative; 即使没有 z-index(fixed 或 absolute 定位)，它在 static 位置的流中出现在任何其他元素的前面，这里唯一的其他元素是 HTML。 body children 被定位在/从 body 的同一水平。

explanation about where bg is drawn : https://www.w3.org/TR/css3-background/#special-backgrounds

2) 对于 header ，您会看到正在发生的 collpsing margin 效应。

What is it ?, a classic confusing thing for beginners ;) see https://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding#Collapsing_margins

边框(可以是透明的)或填充是一种将其包含在内部而不让它应用到外部的方法。

下面使用 z-index 和 padding 代替 border 的片段。这些不是技巧，而是功能。

body {
  position: relative;
  background-image: url("http://animaliaz-life.com/data_images/cat/cat8.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  margin: 0px;
  background-color: black;
}
body::before {
  position: absolute;
  z-index:-1;
  content: '';
  background-color: rgba(44, 62, 80, 0.7);
  width: 100%;
  height: 100%;
}
#body-container {
  background-color: white ;
  
    
}
.container {
  border: 1px solid red;

}
header {
  padding:1px;

}
nav {
  margin: 100px 0px !important;
  border: 1px solid yellow;
}
.nav > li > a > img {
  width: 70px;
  height: 70px;
}
.nav {
  display: inline-block;
  text-align: center !important;
}
.navbar-brand {
  height: auto !important;
  padding-left: 0px !important;
}
.navbar-brand > img {
  height: 70px;
}
.icon-0 {
  background-color: #2ecc71;
}
.icon-1 {
  background-color: #3498db;
}
.icon-2 {
  background-color: #9b59b6;
}
.icon-3 {
  background-color: #f1c40f;
}
.icon-4 {
  background-color: #e74c3c;
}
.icon-5 {
  background-color: #f39c12;
}
.icon-6 {
  background-color: #34495e;
}
.icon-7 {
  background-color: #2ecc71;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<header>
  <!--   NAVIGATION   -->


  <!-- Fixed navbar -->
  <nav class="navbar navbar">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img src="/_Resources/Static/Packages/VMP.Website/Images/vmp_logo_text_white.png" alt="Logo">
        </a>
      </div>


      <div class="navbar-collapse collapse">

        <ul class="nav navbar-nav">


          <li class="normal dropdown">
            <a role="button" aria-expanded="true" data-toggle="dropdown" class="dropdown-toggle" href="/test-1.html">
              <img class="icon-0" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/0.png" alt="Verein" />
              <!--<span class="caret"></span>-->
            </a>
            <ul class="dropdown-menu" role="menu">

              <li class="normal"><a href="/test-1/test-sub.html">test sub</a>
              </li>

            </ul>
          </li>



          <li class="normal">
            <a href="/test-2.html">
              <img class="icon-1" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/1.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-3.html">
              <img class="icon-2" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/2.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-4.html">
              <img class="icon-3" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/3.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-5.html">
              <img class="icon-4" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/4.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test-6.html">
              <img class="icon-5" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/5.png" alt="Verein" />
            </a>
          </li>



          <li class="normal">
            <a href="/test.html">
              <img class="icon-6" src="/_Resources/Static/Packages/VMP.Website/Images/Nav/White/6.png" alt="Verein" />
            </a>
          </li>


        </ul>
      </div>
      <!--/.nav-collapse -->


    </div>
  </nav>

</header>

<!--   CONTENT   -->
<div class="container" id="body-container">
  <div class="neos-contentcollection">
    <div class=" typo3-neos-nodetypes-text">
      <div>
        <p>This is the homepage</p>
      </div>
    </div>
    <div class=" typo3-neos-nodetypes-text">
      <div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
</div>

<!--    FOOTER     -->
<footer>
  <div class="container">
    <hr />

    <div class=" typo3-neos-nodetypes-text">
      <div></div>
    </div>
  </div>
</footer>

关于css - body::before 在前面 - 为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37362194/

25 4 0
文章推荐： Python Pygments 颜色错误
文章推荐： python - 使用 python 请求的代理的 407 响应
文章推荐： html - 如果子元素不适合父元素，则用另一个元素替换它
文章推荐： python - 使用 python selenium 单击不可见的元素
行者123
个人简介

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

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