1

例: http://jsfiddle.net/CPK7L/2/

.example {

  display: inline-block;
  padding: 50px;
  background: rgba(0, 0, 0, 0.5);
  border: 25px solid rgba(0, 0, 0, 0.5);
  margin-right: -30px;
}

.example2 {

  display: inline-block;
  padding: 50px;
  background: rgba(0, 0, 0, 0.3);
  border: 25px solid rgba(0, 0, 0, 0.3);
}

ご覧のとおり、最初の要素の右枠が 2 番目の要素の左枠と重なっています。これが発生すると、rgba 値が積み重なり、右の境界線が暗くなります。

2 番目の要素の左境界線と重なるときにその境界線を「元の」色に表示したい場合、右境界線に必要なアルファ値を計算する方法は?

4

1 に答える 1

0

わかりました、半透明の背景を含めるのは意図的ですか? インライン ブロック要素のボックス モデルは、各アイテムの背景と境界線が既に乗算されていることを意味します。これは意図的な質問ですか、それとも間違いですか? 間違いで、2 つの半透明オブジェクトをオーバーレイして 0.5 の不透明度にする方法を尋ねているだけで、2 番目のオブジェクトの不透明度が 0.3 (X + 0.3 = 0.5) である場合は、0.28 を使用する必要があります。0.29 は、0.71 の光が透過していることを意味します。2 番目のアイテムは、残りの 71% の光の 70% を透過する 0.3 の不透明度に設定されています。71 の 70% は 50 に限りなく近くなります。

背景を含める必要がある場合は、同様の項目 1 を実行します: 背景 50% + 境界線 50% = 不透明度 75%。項目 2: 背景 30% + 境界線 30% = 不透明度 51%。4 色すべてで 75% の不透明度を得るには、item1 に border-right が必要 = 50%(div1 bg) + X(div1 border-right) + 51%(div2 background and border)。ここでの問題は、[50% + X + 51%] が [50% + 50%] に等しくなるためには、X が負の数でなければならないことです。

于 2013-06-04T02:11:08.270 に答える