图像映射不透明度答案

【问题标题】：imagemapster opacity图像映射不透明度
【发布时间】：2012-12-20 05:12:05
【问题描述】：

我正在开发一个项目，用户可以将鼠标悬停在不同的公寓上，并在每个区域旁边的工具提示框中查看价格等。

我为此使用 jquery+imagemapster，每个公寓都是地图上的一个区域，到目前为止效果很好。问题是客户端希望工具提示是透明的，当我在 div 样式中设置“不透明度”时没有任何反应，我尝试了所有主要浏览器。 CSS 的其余部分效果很好，不透明度在常规 div 上有效，但不在工具提示内。如何设置工具提示的不透明度？

我的 javascript 看起来像这样：

var image = $('#apartments1');
            image.mapster({
            toolTipClose: ["area-mouseout"],
            toolTipContainer: '<div style="border: 1px solid #ee6622; background: #FFFFFF; 
font-family:Arial; position:absolute; width:160px; padding:4px; margin: 4px;
 -moz-box-shadow: 0px 0px 7px #cc5511; ' + ' -webkit-box-shadow: 0px 0px 7px #cc5511; 
box-shadow: 0px 0px 7px #cc5511; -moz-border-radius: 6px 6px 6px 6px; 
-webkit-border-radius: 6px; ' +'border-radius: 6px 6px 6px 6px; opacity: 0.1;"></div>',
            clickNavigate: true,

【问题讨论】：

标签： javascript css opacity imagemapster

【解决方案1】：

我为您构建了一个小演示 (jsFiddle)。我刚刚复制了容器的 html 和 css。在这种情况下，不透明度有效，但您也可以看到将工具提示的不透明度设置为 10% 的问题：所有这些都将是 10%，文本也是如此。要更改此设置，请使用 png 作为背景或使用两个相互独立的 div 来获得效果。

顺便说一句：我会插入一个带有 id 的 div，然后在 css 文件中设置该 div 的样式。并且opacity: 0.1; 非常低，可能你看不到。

【讨论】：