HTML5和CSS标题横幅图像和文本对齐方式

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

我一直试图在顶部标题中的文本后面放置一个横幅图像，但格式似乎似乎没有成功。我也在样式表中尝试了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;
  }
html css html5 http-headers background-image
3个回答
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以获取有关定位/尺寸的更多信息。

1
投票

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

0
投票
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.