Question

我使用photoshop在背景图片上叠加徽标。我设置了背景图像，它具有响应性。我设置了一个图像映射，以将徽标用作主页链接。我在网站的其他两个页面上运行良好，但由于背景图像的设置方式，此页面不同。我以为我可以通过使用透明图像和usemap来玩耍。不工作。当我将鼠标悬停在图像地图上时，我能够看到手，但那里没有徽标。网址为http://jandswebsitedesigns.com/test/index.html。左上角的徽标示例为http://jandswebsitedesigns.com/test/im-new-here.html。我在这里的新页面遇到了类似的问题。＆＃34;顶栏＆＃34;位于图像上部顶部的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，并在其中添加徽标。 / p>

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

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

2 个答案: