html - 如何在响应式网页中对齐图像上的文本

<分区>

这不是重复的，因为我在谈论响应式网站

这是我想要的 header ，我希望它能够响应。 What I want

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

页眉图片目前可以针对响应式页面正确缩放，但我希望文本像我的第一张图片一样位于图片上方，并根据用户使用的设备进行缩放。

我想仅使用 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;
}

最佳答案

这个输出是你期待的吗

检查 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="/image/JGpzd.jpg" />
    <h1>Mark Osullivan</h1>
    <h2>Wedding Photograpgy </h2>
  </div>
</body>

</html>

关于html - 如何在响应式网页中对齐图像上的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40059628/