0

我一直在努力解决这个问题，但到目前为止我完全迷失了，我已经尝试了很多与在页面顶部调整图像大小相关的事情，并得出结论，我可以将背景设置为我的扩展版本图像并保持主图像自行调整大小text-align:center（因为主图像较小），

这对我来说完全没问题，直到我意识到为了让我添加按钮，我需要在该图像顶部放置文本，但如果我尝试这样做，它会将图像向下推，这是我的网站当前的一个示例看起来这是我的网站，我正在尝试找到一种方法，可以将文本覆盖应用于此主图像而不会打扰它，

我没有使用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>
4

2 回答 2

0

我最终只使用图像上的区域作为链接，并将单词直接添加到图像中，将其添加到我的代码中

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

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

于 2013-02-26T15:35:16.173 回答
0

看看这个链接。这是你想要的？

根据您的窗口宽度调整背景图像？

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

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

于 2013-02-26T05:00:07.340 回答