使用 ::before 伪元素在页脚上方的图像分隔符

Question

我正在使用 Bootstrap (5) 并且有这样简单的页脚：

我需要的是简单的 divider 在它上面（上图），添加 100px。在此处检查 fiddle：https://jsfiddle.net/Ls1vhncx/5

如何使用 ::before 伪元素获得相同的结果，从而避免没有内容的额外 div？

footer {
  background: #555;
}
.img-border {
  height: 100px;
  width: 1920px;
  background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
  background-color: #555;
  background-position: center;
  background-attachment: fixed;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="img-border"></div>

<footer>
  <div class="container">
    <div class="row">
      <div class="col">
        <h4>Cat 1</h4>
        <ul class="nav flex-column">
          <li><a class="nav-link" href="#">A</a></li>
          <li><a class="nav-link" href="#">B</a></li>
          <li><a class="nav-link" href="#">C</a></li>
        </ul>
      </div>
      <div class="col">
        <h4>Cat 2</h4>
        <ul class="nav flex-column">
          <li><a class="nav-link" href="#">D</a></li>
          <li><a class="nav-link" href="#">E</a></li>
          <li><a class="nav-link" href="#">F</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Answer 1

您需要定位 footer.img-border::before 并将此 class 分配给 DOM 中的页脚元素。实际上，您不需要在 footer.img-border 上设置 background-image，但您必须直接在 footer.img-border::before 伪元素上设置。

查看我的可重现示例以查看结果。

我很确定这就是您使用 CSS 生成此伪元素所需要的。

footer {
  background: #555;
}
footer.img-border:: {
  height: 100px;
  width: 1920px;
  background-color: #555;
  background-position: center;
  background-attachment: fixed;
}

footer.img-border::before {
    content: "";
    display: block;
    width: 100%;
     background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
    height: 100px;
}

<footer class="img-border">
    <div class="container">
        <div class="row">
            <div class="col">
                <h4>Cat 1</h4>
                <ul class="nav flex-column">
                    <li><a class="nav-link" href="#">A</a></li>
                    <li><a class="nav-link" href="#">B</a></li>
                    <li><a class="nav-link" href="#">C</a></li>
                </ul>
            </div>
            <div class="col">
                <h4>Cat 2</h4>
                <ul class="nav flex-column">
                    <li><a class="nav-link" href="#">D</a></li>
                    <li><a class="nav-link" href="#">E</a></li>
                    <li><a class="nav-link" href="#">F</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

Answer 2

您可以通过在页脚上设置上边距使边框 space。

然后你可以在上面放一个 before 伪元素，它有底部 100%（即位于页脚顶部）并且它可以有 100% 的宽度（我认为你不需要设置特定的px 值，如您所做的那样）和 100px 的高度。

footer {
  background: #555;
  position: relative;
  margin-top: 100px;
}

footer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 100%;
  left: 0;
  display: inline-block;
  background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
  background-color: #555;
  background-position: center;
  background-attachment: fixed;
}

<footer>
  <div class="container">
    <div class="row">
      <div class="col">
        <h4>Cat 1</h4>
        <ul class="nav flex-column">
          <li><a class="nav-link" href="#">A</a></li>
          <li><a class="nav-link" href="#">B</a></li>
          <li><a class="nav-link" href="#">C</a></li>
        </ul>
      </div>
      <div class="col">
        <h4>Cat 2</h4>
        <ul class="nav flex-column">
          <li><a class="nav-link" href="#">D</a></li>
          <li><a class="nav-link" href="#">E</a></li>
          <li><a class="nav-link" href="#">F</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

注意：我不清楚 background-attachment: fixed 的使用 - 它似乎并没有在每个浏览器上完全实现。你需要吗？

使用 ::before 伪元素在页脚上方的图像分隔符

Image divider above footer using ::before pseudo element

css

twitter-bootstrap

pseudo-element