徽標未出現在背景圖片上的問題

Question

我用photoshop在背景圖片上疊加了徽標。我有背景圖片設置，它是響應。我設置了一個圖像地圖，以將該圖標用作主頁面鏈接。我在網站的其他兩個頁面上運行良好，但由於背景圖像的設置方式，此頁面不同。我認爲我可以通過使用透明圖像和usemap一起玩。不工作。當我將鼠標懸停在圖像地圖上時，我能夠看到手，但是那裏沒有標識。網址是http://jandswebsitedesigns.com/test/index.html。左上角的徽標示例爲http://jandswebsitedesigns.com/test/im-new-here.html。我在im-new-here頁面有類似的問題。位於圖像上部頂部的「頂部」div（透明）覆蓋可點擊區域。塞繆爾迴應，我添加了div＃top-bar {height：0px; }它修復了它。很好地工作，但同樣的修復在這裏不起作用。

<style> 
body { 

background: url(images/cd-background-1.png) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
position: relative; 
min-height: 100%; 
z-index: 1; } 
</style> 

<div style="text-align: center; height: 800px;"> 
    <img src="images/trans.png" usemap="#logomap"> 
     <map name="logomap"> 
      <area shape="poly" coords="11,2,430,3,432,307,3,320" 

      style="outline:none;" href="index.html" alt="main page"> 
     </map> 


</div> 

Answer 1

如果高度和寬度爲含有它

html, body{ 
    width:100%; 
    height: 100%: 
} 
.my-div{ 
    display: block: 
    width: // must give width 
    height: // must give height 
    background-image: url('...'): 
} 

Answer 2

首先的元件沒有被設置的圖像的背景可能不會出現，我建議不使用usemap，因爲這將使它更難將您的網站移植到移動受衆羣體。

一個更好的方法（我個人使用很多，哪些方法可以處理相關設計）是使用全寬和給定高度製作div，並在其中添加徽標。

的HTML會是這個樣子：

<div class="header"> 
    <a href="#" class="logo"></a> 
</div> 

然後CSS看起來是這樣的：

.header { 
    background-image: url(...); 
    background-position: center; 
    background-attachment: fixed; 
    background-size: cover; 

    display: block; 
    height: 800px; 
} 
.header .logo { 
    width: 400px; 
    height: 300px; 
    display: inline-block; 

    background-image: url(...); 
    background-position: center; 
    background-repeat: no-repeat; 
} 

這件事情從你目前的做法不同，但會與標識解決您的問題。

編輯：我已經提出a little fiddle關於這個問題，在必要情況下給予更多的上下文。