Javascript 徽标未出现在背景图像上的问题

我使用photoshop在背景图像上分层设置徽标。我有背景图像设置，它是响应。我设置了一个图像地图，将徽标用作主页链接。我在网站的另外两个页面上工作得很好，但是这个页面不同，因为背景图像的设置方式不同。我想我可以玩一个把戏，使用一个透明的图像和usemap。不起作用。当我把鼠标悬停在图像地图上时，我可以看到手，但是那里没有徽标。网址是。左上角的徽标示例如下。我有一个类似的问题与im新这里页面。位于图像上部的“顶栏”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>

身体{
背景：url（images/cd-background-1.png）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
位置：相对位置；
最小高度：100%；
z-索引：1；}

如果没有为包含图像背景的元素设置高度和宽度，则图像背景可能不会出现

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

---

首先，我建议不要使用

usemap

，因为这会使你的网站更难面向移动用户

一种更好的方法（我个人经常使用这种方法，这将对正在讨论的设计起作用）是制作一个全宽和给定高度的

div

，并在其中添加徽标

HTML将如下所示：

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

.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;
}

这与您当前的方法有所不同，但会解决您的徽标问题

---

编辑：我已经提出了这个问题，以便在必要时提供更多的上下文。

这应该是什么？你能解释一下如何处理这段代码吗？不确定你所说的.my-div是什么意思。html代码呢？不确定发生了什么。我复制了代码并更改了图像URL。没有什么。刷新屏幕。全屏显示图像，但没有其他内容，甚至无法向下滚动。嗯，当然。默认情况下，

a

标记的显示模式为

inline

，应该是

inline block

。我更新了答案您可能想要接受@shmnsw或我给出的答案，如果它对您有帮助的话。