html - 如何在 div 背景 url 中使用 usemap

Question

我想你了你能帮助我吗？我有这样的风格

.lorry{
    background: url(../img/lorry.png);background-repeat:no-repeat;
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/lorry.png');
    height: 143px;
    width: 385px;
    float: left;
    margin: 39px 0 0 0;
}

我想在图片上添加usemap，可以吗？

Answer 1

您不能将图像贴图放在背景中。如果您需要此功能，则必须对对象进行分层以实现相同的目的:

• 第一层:只有你的图像(不绑定(bind)图像映射)
• 第二层:你想要显示在上面的容器的内容“背景”
• 第三层:绑定(bind)到的图像的另一个副本图像映射，但透明。

这是一个例子:http://jsfiddle.net/jamietre/fgeee/1/

下面是实现此效果的一般构造。它的工作原理是在最顶层有一个图像贴图(因此它将处于事件状态)，但绑定(bind)到一个透明图像。您看到的实际图像隐藏在一切之后，并不透明。

您也可以通过跳过第一个图像并将其作为背景分配给 layer2 div 来对两个图层执行此操作。这仅在您要以原始分辨率显示图像时才有效，所以可能没问题，但这个答案更通用。

<div id="wrapper">
    <img id="layer1" src="some/image.jpg">
    <div id="layer2" style="position: absolute; top: 0; left: 0;">
         Your content here
    </div>
    <img id="layer3" 
      style="position: absolute; top: 0; left: 0; opacity:0; *filter: Alpha(opacity=0);" 
      usemap="#your-map" src="some/image.jpg">
</div>

注意事项:

• 需要包装器才能进行绝对定位
• *filter: .. css 是给支持者 IE <8 的，它不理解不透明度。