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 に答える