頁腳上方的影像分隔線使用::before偽元素

我正在使用 Bootstrap (5) 并且有這樣的簡單頁腳：

我需要的是上面的簡單分隔線（上圖），加上 100px。在這里檢查小提琴：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/[email protected]/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>

uj5u.com熱心網友回復：

您可以通過在頁腳上設定上邊距來為邊框騰出空間。

然后您可以在其上放置一個具有底部 100%（即位于頁腳頂部）的 before 偽元素，并且它可以具有 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 的使用 - 這似乎并沒有在每個瀏覽器上完全實作。你需要它嗎？

uj5u.com熱心網友回復：

您需要的是定位footer.img-border::before該類并將其分配給 DOM 中的頁腳元素。實際上，您不需要設定background-imageon the ，footer.img-border但您必須直接在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>

標籤：css 推特引导 伪元素

上一篇：僅將Mantine樣式覆寫為一個元素

下一篇：如何在vue-cli構建的vue專案中使用bootstrap-icons作為svgs