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

Question

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

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

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

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

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

Answer 1

这个输出是否符合你的预期

检查 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>

Answer 2

您可以将图像设置为 header 的背景，并在 center

中对齐文本

#header  {
 width: 100%;
 max-width: 1024px;
 background-image:url("https://i.stack.imgur.com/JGpzd.jpg");
  background-size: 100% 100%;
    background-repeat: no-repeat;
}   

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

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

<div id="header">
 
 <h1>Mark Osullivan</h1>
 <h2>Wedding Photograpgy </h2>
</div>

Answer 3

我也选择上面那个。使用您的图像作为背景，并将文本放在顶部

的 div 中

哦，要缩放文本，只需将字体大小设置为 vw 或 em。然而，在我的实验中，我只是使用像素来指定字体大小，并且在你向下移动时让媒体查询中的大小发生变化。

希望对你有帮助

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

How to align text over an Image in a responsive webpage

html

css

image

responsiveness