HTML5 & CSS Header 横幅图像和文本对齐

Question

我一直在尝试将横幅图片放在顶部的文本后面 header，但格式设置似乎并不奏效。我还在样式表中尝试了 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 了解有关 positioning/sizing 的更多信息。

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 Header 横幅图像和文本对齐

HTML5 & CSS Header banner image and text alignment

html

css

background-image

http-headers