Question

我知道如何为前景图像设置图像地图。但这次我想要为图像的一部分设置图像映射，将其设置为div的背景图像。我怎么能这样做。我搜索了一个很多在网络上，无法得到解决方案。请帮忙。例如，

enter image description here

HTML

<div class="header full" style="background:url('/hdr.jpg';?>) no-repeat; height:492px">

整个图像设置为背景图像，我想点击Nestle椭圆形部分，然后重定向到某个网址。

Answer 1

请尝试以下代码
使用您的图片并重命名为 test.jpg 请把所有都放在同一个文件夹中进行测试，并根据需要更改代码（这只是一个例子）

**CSS** (style.css)



.image{
   background: url("test.jpg") repeat scroll 0 0 transparent;
   height: 185px;
   width: 266px;
   border: 1px solid;
   }
    .link{
        padding-left: 26px;
        padding-top: 23px;
        position: absolute;
    }
    .link a{
      padding-left: 0;
      display: block;
      height: 48px;
      width: 67px;
    }
    .container{
    position: relative;
    }

<强> HTML

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="link"> <a href="">&nbsp;</a></div>
<div class="image">
</div>
</div>

Answer 2

以下是一个解释示例：http://quackit.com/html/tutorial/html_image_maps.cfm

Answer 3

好你把图像作为背景因为他们现在没有这个元素在div中点击

如果您只需要图像映射中链接的“矩形”形状，则可以使用css定义的链接位置。这是通过指定位置并将背景颜色设置为透明来实现的。 Here is an example

如何在背景图像的一部分中设置图像映射？

3 个答案: