Question

我想知道如何在不改变其他元素位置的情况下设置背景图像？我希望这些项目位于bg-image的顶部。

（我已尝试使用位置：绝对但是这使得我的其他项目无法点击，因为一切都处于离线状态，我随机拍摄了一张图片）

这是我得到的：

＆＃13;

.bg-header{
  height: 77.5rem;
  width: 128.6rem;
  background-image: url(https://www.google.be/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=0ahUKEwjF0-TKlO_YAhVlIsAKHZQEA0wQjRwIBw&url=https%3A%2F%2Fimagejournal.org%2F&psig=AOvVaw0k5kAcZwpSTzuIwHkdaVeO&ust=1516833850304522);
  background-repeat: no-repeat;
  background-position: top;
  
}


.container-header{
  width: 96rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

nav{
  display: flex;
  justify-content: center;
  padding: 3rem 0rem;
}

ul{
  display: flex;
  justify-content: space-between;
  width: 40%;
}

li{
  list-style: none;
  display: inline;
  padding: 1rem 2rem;
}

a{
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-family: 'Fira Sans';
  letter-spacing: .2rem;
  font-size: 1.5rem;
}

＆＃13;

  <header>
  <div class="container-header">
        <div class="bg-header"></div>
        <nav>
          <ul>
            <li><a href="./index.html">home</a></li>
            <li><a href="">activiteiten</a></li>
            <li><a href="#">extra</a> </li>
          </ul>
        </nav>
        
          <div class="title">
          <h1 class="blue">blue</h1>
          <div class="blok-title">
            <div class="M"></div>
            <h1 class="monday"><span class="hide">m</span>onday</h1>
          </div>
          <p class="intro">Het is ondertussen geen geheim meer. Maandagen zijn echt kutdagen. Maar als je er dan eentje moet uitkiezen die dan wel de ergste is, dan is het wel deze. </p>
        </div>
  
      </div>
    </header>

＆＃13;

Answer 1

如果您希望自己的示例正常运行，则position: relative;需要.container-header，而.bg-header上需要position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; /* Makes the image fill the element */ /* Remove height and width */：

.bg-header

这会使.container-header占用与.container-header相同的区域。但您也可以将背景图像应用于background-size: cover并添加

System Name: MetroCore-PTX5K-Bur-601-1-re0
Port id: et-7/1/19
System Name: MetroCore-PTX5K-Bur-601-1-re0
Port id: 21
System Name: ProCurve 6120G/XG Blade Switch
Port id: 1106
System Name - not advertised
Port id: 1105
System Name - not advertised
Port id: et-7/1/0
System Name: MetroCore-PTX5K-Abar-422-1-re0
Port id: et-3/1/0
System Name: MetroCore-PTX5K-Abar-422-1-re0
Port id: Te0/0/0/0
System Name: UPE9-TYBHDNAX-2.stc.com.sa

使图像填充元素。

Answer 2

我假设您希望背景显示在您的所有元素后面。在这种情况下，您不需要具有类bg-header的div。只需将背景应用于header元素或.container-header，如下所示：

"{:04.1f}".format(number).replace(".0", "")

Answer 3

试试这个不要关闭bg-header div标签并在你的''标题结束标记之前放置一个结束div标签

如何在不影响其他元素的情况下设置背景图像

3 个答案: