0

我正在使用 Raphael 2.1.0 ( raphaeljs.com ) 没有问题。实际上我是在<div>with上绘制元素opacity: 0.6;。很明显，Raphael 元素获得了相同的不透明度。

我想知道是否有任何方法可以在透明纸（60%）上渲染不透明元素（100%）。

这是一个 JSFiddle 来说明我的事情。

起初我的想法是在我的透明图层上方放置一个没有背景的图层<div>，这将是我的纸张。这样，它可以为我的 Raphael 元素赋予其不透明度（100%）。

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

4

1 回答 1

0

从您的小提琴中，我可以看到您有一个名为的外部和一个div名为的内部。您正在渲染您的纸张并将样式应用于自身。#overlaydiv#paper#paperbackground:white; opacity:0.6;#paper

正如您在问题的评论中提到的，使用background-color: rgba(255,255,255,0.6);代替opacity是一种选择。但这不适用于 IE 8 及更低版本，并且在其他一些旧版本的其他浏览器上也不起作用。

一种更语义化的方法是插入一个与之前div高度相同的 new ，然后应用负边距以使其高于新插入的.#paper#paper#paperdiv

<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/

于 2013-06-12T07:31:42.513 回答