Div、背景图像和图像映射
在我正在创建的网页上，我有一个带有背景图像的 div。我在经常更改的图像上覆盖了一些文本，这就是为什么我使用背景图像和真实文本而不是包含文本的 img 标签。
背景图像包含一些可点击的区域，所以我需要一个图像映射。
我认为最好的方法是使用另一个带有透明图像的覆盖 div，并为透明图像提供一个与背景区域可点击区域相对应的图像映射。
我走在正确的道路上，还是有更好的方法？
On a web page I'm creating, I have a div with a background image. I overlay some text over the image that I'll be changing frequently, so that's why I'm using a background image and real text instead of an img tag that contains the text.
The background image contains some click-able areas, so I need an image map.
I think the best way to do this is to have another overlay div with a transparent image, and have an image map for the transparent image that corresponds to the background area click-able areas.
Am I on the right track, or is there a better way?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您只需要图像映射中链接的“矩形”形状，则可以使用 css 定义的链接位置。这是通过指定位置并将背景颜色设置为透明来完成的。这是一个示例：http://www.position-relative.com/tutorials/tute1_css_bg_image。 php
If you only need the "rectangle" shape for the links in the image map, you could use css defined link positions instead. This is accomplished by specifying the position and setting the background-color to transparent. Here is an example: http://www.position-relative.com/tutorials/tute1_css_bg_image.php
你可能会尝试将背景 div 放在“float”上
IE
<
代码>
div. 背景 {
浮动：左；
}
因为它上面有一个“浮动”，所以背景的大小不会将其后面的 div 推到一边...
然后你可以创建第二个 div 来包含所有文本内容，然后使用类似的东西:
<代码>
div.文本区域{
职位：真实的；
左：50px；
}
将文本区域（您将进行大量编辑）定位在 div 背景上方
something you might try is placing the background div on "float"
IE
div.background {
float:left;
}
since its got a "float" on it the size of the background wont push the divs that come after it to the side...
then you can make a second div to contain all the text stuff and then use something like :
div.textarea{
position:realtive;
left:50px;
}
to position the text area (that youll be editing a lot) above the div background
IE6 不支持透明度，因此我建议您使用 IE6 png 修复 hack。
IE6 doesn't support transparency so I recommend you use the IE6 png fix hack.