Question

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

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

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

标题图像当前正在针对响应式页面进行正确缩放，但我希望文本位于图像上，就像在我的第一张图像中一样，并根据用户使用的设备进行缩放。

我想用html和css来完成这个。

HTML

120px

CSS

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

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

我同意上面的那个。使用您的图像作为背景，并将文本放在顶部的div中

哦，要缩放文字，只需在vw或em中输入字体即可。然而，在我的exp中，我只是使用像素来指定字体大小，只是在你下载时在媒体查询中改变大小。

希望有所帮助

Answer 3

您可以将图片设置为header的背景，并将文字与center

对齐

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

3 个答案: