如何在 div 背景 url 中使用 usemap [英] How using usemap in div background url

问题描述

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

i missed you can you help me? i have such style

.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，可以吗?

I want to add usemap on image, is it possible?

推荐答案

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

You can't put an imagemap in a background. If you need this functionality you will have to layer objects to achieve the same thing:

• 第一层:只是你的图片(不绑定到 imagemap)
• 第二层:你希望在容器中出现的内容背景"
• 第三层:图片的另一个副本绑定到图像映射，但透明.

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

以下是实现此效果的一般构造.它的工作原理是在最顶层有一个图像映射(因此它将处于活动状态)，但绑定到一个透明图像.您看到的实际图像在所有事物的背后，并且不透明.

Below is the general construct to achieve this effect. It works by having an imagemap on the topmost layer (so it will be active), but bound to a transparent image. The actual image you see is behind everything, and is not transparent.

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

You can also do this with two layers by skipping the first image, and assigning it as a background to the layer2 div. This will only work if you are going to display the image at its native resolution, so may be fine, but this answer is more general purpose.

<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 的，它不理解不透明度.

这篇关于如何在 div 背景 url 中使用 usemap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！