div、背景图像和图像映射

Posted

技术标签:

【中文标题】div、背景图像和图像映射【英文标题】:Div, Background Image, and Image Map 【发布时间】:2010-12-16 06:43:03 【问题描述】:

在我正在创建的网页上,我有一个带有背景图像的 div。我在图像上覆盖了一些我会经常更改的文本,这就是为什么我使用背景图像和真实文本而不是包含文本的 img 标签。

背景图片包含一些可点击的区域,所以我需要一张图片地图。

我认为最好的方法是使用另一个带有透明图像的覆盖 div,并为透明图像设置一个与背景区域可点击区域相对应的图像映射。

我是在正确的轨道上,还是有更好的方法?

【问题讨论】:

【参考方案1】:

如果您只需要图像映射中链接的“矩形”形状,则可以改用 css 定义的链接位置。这是通过指定位置并将背景颜色设置为透明来完成的。这是一个例子:http://www.position-relative.com/tutorials/tute1_css_bg_image.php

【讨论】:

【参考方案2】:

您可能会尝试将背景 div 置于“浮动”上 浏览器

div.background float:left;

因为它上面有一个“浮动”,所以背景的大小不会将后面的 div 推到一边......

然后您可以创建第二个 div 来包含所有文本内容,然后使用类似:

div.textarea position:realtive; left:50px;

将文本区域(您将经常编辑)定位在 div 背景上方

【讨论】:

【参考方案3】:

IE6 不支持透明度,所以我建议你使用 IE6 png fix hack。

【讨论】:

以上是关于div、背景图像和图像映射的主要内容,如果未能解决你的问题,请参考以下文章

div背景图像和iOS Mobile Safari兼容性问题

如何将背景图像适合主div?

拖动背景图像

css怎么给div加背景图片

设置 div 背景图像以适合其大小?

div的背景图像和边距顶部问题