如何在自适应网页中的图像上对齐文本

debugcn 发表于 Dev

标记

这不是重复的，因为我所说的是响应式网站

这是我想要的标题，我希望它能够响应。我想要的是

但是，我不想将其用作图像，而是希望将图像和文本分开。这是原始图像文件

页眉图像当前可正确缩放以响应页面，但是我希望将文本放置在图像上，就像在我的第一幅图像中一样，并使其根据用户使用的设备进行缩放。

我想仅使用html和css完成此操作。

的HTML

<div id="header">
 <img src="images/Header.jpeg" alt=""/>
 <h1>Mark Osullivan</h1>
 <h2>Wedding Photograpgy </h2>
</div>

的CSS

#header img {
 width: 100%;
 max-width: 1024px;
}   

#header h1 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 50px;
}

#header h2 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 35px;
}

曼达·桑特（Mandarr Sant）

这是输出ru预期的吗

检查jsbin中的输出

#header img {
  width: 100%;
  max-width: 1024px;
  position: absolute;
  z-index: -1;
}
#header h1 {
  color: #FFFFFF;
  text-shadow: 3px 3px #000000;
  font-size: 50px;
  position: relative;
  z-index: 10;
   text-align:center;
 
}
#header h2 {
  color: #FFFFFF;
  text-shadow: 3px 3px #000000;
  font-size: 35px;
   text-align:center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="header">
    <img src="https://i.stack.imgur.com/JGpzd.jpg" />
    <h1>Mark Osullivan</h1>
    <h2>Wedding Photograpgy </h2>
  </div>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。