用不透明度在纸上渲染拉斐尔元素

时间:2013-06-11 15:59:28

标签: css raphael

我正在使用Raphael 2.1.0(raphaeljs.com)没问题。实际上我正在使用<div>opacity: 0.6;上绘制元素。很明显,拉斐尔元素具有相同的不透明度。

我想知道是否有办法在透明纸上(60%)渲染不透明元素(100%)。

Here是一个用来说明我的东西的JSFiddle。

我最初的想法是在透明的<div>上方放置一个没有背景的图层,这将是我的论文。这样,它可以给我的拉斐尔元素带来不透明度(100%)。

但我想我错过了一种更简单的方法。

1 个答案:

答案 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;
}

更新小提琴:http://jsfiddle.net/shamasis/AFTQV/8/