Question

我一直试图在顶部标题的文本后面放置横幅图像，但是格式似乎无法解决。我还在样式表中尝试过background-image: url(/imgs/header_pic.jpg);，但这种方法甚至都没有显示出来。当前它显示在文本后面，无法将图像居中或调整为最大高度，并且导航（列表项）也与图像重叠。

div#header-background {
  position: absolute;
  max-height: 4em;
  z-index: -1;
  border-radius: 10%;
  opacity: 0.25;
}

h1#header-text {
  position: relative;
  top: 0;
  text-align: center;
  font-size: 3em;
}

<body>
  <header>
    <div id="header-background"><img src="imgs/header_pic.jpg"></div>
    <h1 id="header-text">John Doe</h1>
  </header>
  <nav>
    <ul style="list-style-type: none">
      <li><a href="index.html">Main</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <main></main>
  <footer></footer>
</body>

更新：检查完答案后（谢谢！）。我做了一些研究，并将其修改为以下代码。现在，我只需要垂直移动文本到中心，因为它的居中位置不是很理想，而是有点偏离。你们怎么看？

header{
    width: 100%;
    height: 12em;
    position: relative;
  }

h1#header-text{
    position: absolute;
    z-index:999;
    text-align: center;
    font-size: 3em;
    width: 100%;
    height: 100%;
  }
  
header:after{
    content: "";
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url(imgs/header.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.25;
  }

Answer 1

当前的操作方式，可以通过将其添加到CSS中来隐藏溢出：

div#header-background{
    position: absolute;
    max-height: 4em;
    z-index: -1;
    border-radius: 10%;
    opacity: 0.25;
    overflow: hidden;
}

https://jsfiddle.net/f0xwbq73/2/

要应用背景图片，您可以这样操作：

header{
    background-image: url('https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

h1#header-text{ 
    position: relative;
    top: 0;
    text-align: center;
    font-size: 3em;
}

<body>
<header>
    <h1 id="header-text">John Doe</h1>
</header>
    <nav>
       <ul style="list-style-type: none">
          <li><a href="index.html">Main</a></li>
          <li><a href="about.html">about</a></li>
          <li><a href="contact.html">Contact</a></li>
       </ul>
    </nav>
    <main></main>
    <footer></footer>
</body>

但是，您将无法通过CSS控制图像的不透明度，因此必须通过Photoshop或其他图像编辑器来实现。

https://jsfiddle.net/5g1zjLhw/

您可以检查https://www.w3schools.com/cssref/pr_background-image.asp以获得有关定位/尺寸调整的更多信息。

Answer 2

我是网页设计的新手，但如果可以的话，我想帮助您解决问题。我相信您的问题是您没有定义图像的大小。我复制了您的代码，并输入了图像的宽度和高度值，它对我有用。

Answer 3

div#header-background {
  background-image:url('imgs/header_pic.jpg');
  background-size:cover;
  opacity: 0.25;
}
h1#header-text{
  text-align:center;
}
ui li{
  text-decoration:non;
  display:block;
}

<body>
  <header id="header-background">
    <h1 id="header-text">John Doe</h1>
  </header>
  <nav>
    <ul>
      <li><a href="index.html">Main</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <main></main>
  <footer></footer>
</body>

HTML5和CSS标头横幅图像和文本对齐

3 个答案: