Question

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

我想知道是否有办法在透明纸上（60％）渲染不透明元素（100％）。

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

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

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

Answer 1

从你的小提琴中，我可以看到你的内部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/

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

1 个答案: