javascript - Logo 未出现在背景图片上的问题

Question

我使用 photoshop 在背景图片上叠加了一个标志。我设置了响应式背景图像。我设置了一个图像映射以使用 Logo 作为主页链接。我在网站的其他两个页面上运行良好，但由于背景图像的设置方式不同，此页面有所不同。我想我可以通过使用透明图像和 usemap 来玩个把戏。不工作。当我将鼠标悬停在图像 map 上时，我可以看到手，但那里没有 Logo 。网址是 http://jandswebsitedesigns.com/test/index.html .左上角的 Logo 示例是 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('...'):
}