我一直在努力解决这个问题，但到目前为止我完全迷路了，我已经尝试了很多与调整页面顶部图像大小相关的事情，并得出结论，我可以将背景设置为扩展我的图像版本并使用 text-align:center 将主图像调整到自己的大小(因为主图像较小)，
这对我来说工作得很好，直到我意识到为了让我添加按钮，我需要在该图像的顶部添加文本，但如果我尝试这样做，它会将图像向下推，这是一个例子我的网站目前看起来像这样 my website ，我正在尝试找到一种方法，可以在不干扰主图像的情况下将文本叠加应用于此主图像，
我没有使用 margin-left/margin-right 或 position:absolute 的原因是当我改变了我的浏览器大小。任何帮助将不胜感激
(我的 HTML 不是最好看的，因为我还在开始)
<style type="text/css">
body {
background-image:url('images/Website Banner Number 2.png');
background-color:#000000;
background-repeat:no-repeat;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="z-index:10">
<div style="text-align:center">
<img src="images/Website Banner.png" />
</div>
</div>
<div style="z-index:9">
<div style="width:925px" id="container">
<div id="header" style="background-color:#333333">
<h3 style="margin-bottom:0;"> <span style="color:#FFFFFF"> »</span><span
style="color:#0000CC" class="words">[Welcome] </span><span style="color:#FFFFFF"
class="words">to Han's tech class site</span> </h3>
</div>
最佳答案
看看这个Link . 这是您要找的吗？
背景图片根据您的窗口宽度调整？
background:url("http://www.testinghtml.tk/images/Website Banner Number 2.png") no-repeat scroll center top/cover transparent;
此外建议您将背景添加到另一个 div (bodyWrapper) 而不是 body 因为您可以然后根据您的需要调整 div 的高度需要
关于javascript - 将文本应用于图像(不推送它)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15081231/