imagemapster不透明度

Question

我工作在一个项目中，用户将能够悬停在不同的公寓，并看到价格，在工具提示框旁边的每个地区等。

我正在使用jquery+imagemapster来做这件事，每个公寓都是地图上的一个区域，到目前为止它工作得很好。问题是客户端希望工具提示是透明的，当我在div样式中设置"opacity“时什么都没有发生，我尝试了所有主要的浏览器。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,

Answer 1

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

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