4

いくつかのdivとその不透明度で動作するシステムを作成する必要があります。

いくつかの例に直接行きます。すべてのdivは黒です：-2つのdivがあり、それらはオーバーラップしています。divには不透明度XとXがあるため、オーバーラップ領域は不透明度1になります。

  • 私は10個のdivを持っていますが、それらはオーバーラップしています。divの不透明度はx1、x2、...、x10であり、すべてのdivのオーバーラップ領域は不透明度1になります。9（10）divのオーバーラップ領域は、10divのオーバーラップ領域よりも透明になります。すぐ...

これを達成する方法は？各divの「X」不透明度パラメーターを取得するアルゴリズムが必要です。

皆さんありがとう。

解決しました！

最終不透明度=1-（1-op1）（1-op2）またはop1 + op2-op1 * op2

log 0.01 = x * log op

ここで、opは単一レベルの不透明度です。

（天才的な友人に感謝します）

4

3 に答える 3

1

解決：

最終不透明度=1-（1-op1）（1-op2）またはop1 + op2-op1 * op2

log 0.01 = x * log op

ここで、opは単一レベルの不透明度です。

于 2012-10-04T21:01:27.207 に答える
0

あなたの問題が面白いと思いました。私は数学者でも物理学の専門家でもないので、推測にすぎません。

2つのdivのオーバーラップは、不透明度が2つのdivの不透明度の追加であるオーバーラップ領域になると言えますか。だからもし

D1's opacity = 0.1 
and 
D2's opacity = 0.2 
their overlap opacity = 0.3. (can it be?)

したがって、追加が1を超える場合、さらに4つのdivがオーバーラップする場合、オーバーラップ領域の組み合わせは完全に黒になります。

あるいは、あなたの問題をprogramer.stackexchage.comにも載せることをお勧めします、そこの人々は単にアルゴリズムが大好きです:)

わかりました、多分それはそのように機能しません。簡単なjsFiddleを作成しました。ここの誰かがすでに持っています、とにかく私はあなたにこのリンクを与えます。http://jsfiddle.net/gHjrN/

ここでは、不透明度を変えて4つのdivを作成しました。それらの不透明度の合計は1.0をはるかに超えていますが、それでもそれらの集合的なオーバーラップはまだ真っ黒ではありません。ところで、なぜあなたはアルゴリズムを探しているのですか、ブラウザはそれを自分でやっているようです：D

わかりました。部分的に透明な要素が重なっている場合に役立つ不透明度が見つかる可能性のあるリンクをいくつか見つけました。計算された不透明度は1-(D1's opacity X D2's opacity)

于 2012-09-13T14:21:59.123 に答える
0

質問を完全に理解できるかどうかはわかりませんが、もし私があなたなら、これをテストするためにjsFiddleを設定します。

これに沿った何かが、いくつかのプロトタイプ作成の良い出発点になります。

CSS：

#contain {position:relative;}
#actual-black {background-color:black}

.overlap {
    position:absolute;top:1em;left:0;
    background-color:black; opacity:0.2;
}

HTML：

<div id="contain">
<div id="actual-black">The background is opaque black</div>
<div class="overlap">This is transparent black</div>
<div class="overlap">This is transparent black</div>
<div class="overlap">This is transparent black</div>
<div class="overlap">This is transparent black</div>
</div>​

さまざまな数の透明なdivと、それらの不透明度を試してみてください。新しいクラス（「overlap2」など）を設定し、それにさまざまな不透明度を適用します。

これを処理するための「アルゴリズム」がすべてのブラウザで機能する場合は驚きますが、結果に本当に興味があります（そして、私が間違っていて、これが実際に予測可能であることを願っています）。見つけたものを投稿してください。

于 2012-09-13T14:22:03.653 に答える