我正在使用Raphael 2.1.0(raphaeljs.com)没问题。实际上我正在使用<div>
在opacity: 0.6;
上绘制元素。很明显,拉斐尔元素具有相同的不透明度。
我想知道是否有办法在透明纸上(60%)渲染不透明元素(100%)。
Here是一个用来说明我的东西的JSFiddle。
我最初的想法是在透明的<div>
上方放置一个没有背景的图层,这将是我的论文。这样,它可以给我的拉斐尔元素带来不透明度(100%)。
但我想我错过了一种更简单的方法。
答案 0 :(得分:0)
从你的小提琴中,我可以看到你的内部div
名为#overlay
,而div
内部名为#paper
。您正在#paper
内展示论文并将background:white; opacity:0.6;
样式应用于#paper
本身。
正如您问题中的评论所述,使用background-color: rgba(255,255,255,0.6);
代替opacity
是一种选择。但是这对IE 8及以下版本不起作用,而且在其他浏览器的某些旧版本上也是如此。
更加语义化的方法是在div
之前插入与#paper
相同高度的新#paper
,然后对#paper
应用负余量将它带到新插入的div
。
<div id="overlay">
<div id="paperbg"></div>
<div id="paper"></div>
</div>
你的CSS就像
#overlay {
background: #88bb00;
height: 400px;
padding: 10px;
width: 200px;
}
#paper {
height: 400px;
width: 200px;
margin-top: -400px;
}
#paperbg {
width: 200px;
height: 400px;
background: white;
filter: alpha(opacity=60);
opacity: 0.6;
}