在 ::before 选择器中使用绝对位置时，它不起作用

Question

我试图使用 ::before 选择器设置背景图像，并且使用绝对位置，但是当我在浏览器中检查相同位置时，它显示位置为绝对位置，但我无法使用 z-index、顶部或左侧。。另一张图像是高度为 100% 时的图像 ->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/style1.css" />
    <title>The Fighters Stop</title>
  </head>
  <body>
    <header class="header">
      <nav class="navbar">
        <ul class="r-wing no-disc">
          <li class="nav-items" id="logo">LOGO</li>
        </ul>
        <ul class="l-wing no-disc">
          <li class="nav-items">HOME</li>
          <li class="nav-items">ABOUT</li>
          <li class="nav-items">CONTACT US</li>
          <li class="nav-items">PARTNERS</li>
        </ul>
      </nav>
      <h1>The Fighters Stop</h1>
      <p>
        Here you can get all varieties of martial arts gear without compromising
        the quality.
      </p>
      <button type="submit">Order Now</button>
    </header>
    <main>
      <section id="sec-1">
        <div class="items1"></div>
        <div class="items2"></div>
        <div class="items3"></div>
        <div class="items4"></div>
        <div class="items5"></div>
        <div class="items6"></div>
        <div class="items7"></div>
        <div class="items8"></div>
        <div class="items9"></div>
        <div class="items10"></div>
        <div class="items11"></div>
        <div class="items12"></div>
      </section>
      <section id="sec-2">
        <ul class="no-disc">
          <li>Partner</li>
          <li>Partner</li>
          <li>Partner</li>
          <li>Partner</li>
          <li>Partner</li>
        </ul>
      </section>
      <footer id="contact-sec">
        <form action="noaction.node" method="get">
          <div class="form-group">
            <label for="name">Your Name</label>
            <input type="text" name="name" id="name" placeholder="Enter your name..."/>
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="text" name="email" id="email" placeholder="Enter your E-mail..."/>
          </div>
          <div class="form-group">
            <label for="phone-num">Phone Number</label>
            <input type="text" name="phone-num" id="phone-num" placeholder="Enter your phone number..."/>
          </div>
          <div class="form-group">
            <label for="comments">Comments(Feedback)</label>
            <input type="text" name="comments" id="comments" placeholder="any comments..."/>
          </div>
        </form>
      </footer>
    </main>
  </body>
</html>

body {
    margin: 0;
    padding: 0;
}

.header {
    text-align: center;
}

.header::before {
    content: "";
    background: url("https://wallpaperbat.com/img/138398-ufc-hd-wallpaper-and-background-image.jpg") no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
    opacity: 0.8;
    color: red;
}
.navbar {
    display: flex;
    justify-content: space-between;
}
.r-wing, .l-wing {
    display: flex;
}

.l-wing {
    width: 30%;
    justify-content: space-around;
}

.no-disc {
    list-style-type: none;
}

Answer 1

这里不能使用 height auto，因为

::before

实际上是一个空块，所以 height-auto===0。如果它应该与标题大小相同，您应该给出相对于标题高度之前的标题位置：100%；

body {
    margin: 0;
    padding: 0;
}

.header {
position: relative;
    text-align: center;
}

.header::before {
    content: "";
    background: url("https://wallpaperbat.com/img/138398-ufc-hd-wallpaper-and-background-image.jpg") no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.8;
    color: red;
}
.navbar {
    display: flex;
    justify-content: space-between;
}
.r-wing, .l-wing {
    display: flex;
}

.l-wing {
    width: 30%;
    justify-content: space-around;
}

.no-disc {
    list-style-type: none;
}

在 ::before 选择器中使用绝对位置时，它不起作用

问题描述投票：0回答：1

1个回答

最新问题

在 ::before 选择器中使用绝对位置时，它不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1