Question

我一直试图解决这个问题但是我现在已经完全迷失了，我已经尝试了很多与调整页面顶部图像相关的内容并得出结论我可以将背景设置为扩展我的形象版本＆amp;使用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"> &#187;</span><span  
style="color:#0000CC" class="words">[Welcome] </span><span style="color:#FFFFFF"     
  class="words">to Han's tech class site</span> </h3>
 </div>

Answer 1

看看这个Link。这是你在找什么？

根据窗口宽度调整背景图片？

background:url("http://www.testinghtml.tk/images/Website Banner Number 2.png") no-repeat scroll center top / cover transparent;

除了建议你将背景添加到另一个div （bodyWrapper）和而不是身体，因为你可以然后根据你的身高调整div的高度需要

Answer 2

我最后只是将图像上的区域用作链接，并将该字直接添加到图像中，将其添加到我的代码中

    <div style="text-align:center">
 <img src="images/Website Banner.png" alt="Han's Class" usemap="hans" />
 <map name="hans">
 <area shape="rect" color="#FFFFFF" coords="7,371,90,395" href="index.html" alt="Home">
 <area shape="rect" color="#FFFFFF" coords="117,371,200,395" href="general.html" alt="Information">
 <area shape="rect" color="#FFFFFF" coords="227,373,310,395" href="info.html" alt="General">
 <area shape="rect" color="#FFFFFF" coords="336,373,422,395" href="faq.html" alt="Frequently Asked Questions">
 <area shape="rect" color="#FFFFFF" coords="446,372,532,395" href="rules.html" alt="Rules">
 <area shape="rect" color="#FFFFFF" coords="559,372,645,395" href="forum.html" alt="Forums">
 </map>
</div>

我希望有另一种方法可以做到这一点，所以当我将鼠标悬停在按钮上时，我可以让按钮亮起，但我想这可以作为一个很好的选择，感谢那些试图提供帮助的人。如果您知道更好的方式让我知道！

将文本应用于图像（不推送）

2 个答案: