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

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 的问题，以便在必要时提供更多背景信息。