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

【问题标题】：How to set image map in a portion of the background image?如何在背景图像的一部分中设置图像映射？
【发布时间】：2013-03-04 10:29:52
【问题描述】：

我知道如何为前景图像设置图像映射。但是这次我想为图像的一部分设置图像映射，它被设置为 div 的背景图像。我该怎么做。我已经搜索了一个网上很多，找不到解决办法。请帮忙。例如，

html

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

整个图片设置为背景图片，我想点击Nestle椭圆部分，会被重定向到某个url。

【问题讨论】：

What have you tried?你有代码要显示吗？
请发布一些代码、图形或 JSfiddle 以澄清您的问题

标签： php html css imagemap

【解决方案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>

【讨论】：

【解决方案2】：

这是一个带有解释的示例：http://quackit.com/html/tutorial/html_image_maps.cfm

【讨论】：

【解决方案3】：

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

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

【讨论】：