應用文本的圖像（不推）

我一直試圖讓這個工作了，但我完全失去截至目前，我試圖與在該頁面的頂部調整我的形象，很多事情得出的結論是，我可以設置背景爲&我的形象的擴展版本保持主圖像以它自己的尺寸使用text-align:center（因爲主圖像更小），應用文本的圖像（不推）

這是完全正常工作，對我罰款，直到我意識到，爲了讓我要添加按鈕，我需要有該圖像的頂部的文本，但如果我嘗試做到這一點的向下推的形象，什麼我的網站目前看起來像一個例子是這樣的my website，我想找到一種方法，我可以將文本疊加應用到該主圖像而無需顯示turbing它，

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

來源

2013-02-26 Anthony Tobuscus

沒有看到你的實際代碼，這是沒有意義的。 – Pointy 2013-02-26 04:15:31

我想你可能只是在我鏈接的網頁上使用「查看源代碼」，但我會用代碼更新。 – 2013-02-26 04:22:38

爲了讓人們回答你的問題，你應該讓儘可能容易弄清楚什麼是錯的，這意味着發佈你認爲是我所能想到的更新有關及其它細節 – KaeruCT 2013-02-26 04:24:53

看一看這個Link。這是你在找什麼？

背景圖像根據你的窗口寬度調節？

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

另外建議你到背景添加到另一個DIV（bodyWrapper）和不是身體因爲根據你的需要，你可以然後調整div的高度

來源

2013-02-26 05:00:07

我希望它是xD，我試圖保持佈局我已經設置，如果你還沒有看到它，它是[鏈接]（http://www.testinghtml.tk）我試圖得到一些'page'代碼在你在圖像上看到的黑色標籤中，這樣我就可以用這種方式切換頁面。但每當我嘗試將這些圖像放在圖像上時，它都會推動圖像。 – 2013-02-26 05:10:11

最後我只是用區域的圖像的鏈接，而不是上直接添加文字到圖像，添加到了我的代碼

<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-26 15:35:16

應用文本的圖像（不推）

回答

相關問題