css - 2つの重なり合うdivの「二重不透明度」を処理する方法

Question

不透明度が0.6の2つのdivがあります。それらをオーバーラップさせる必要がありますが、不透明度を保持し、新しい結合された不透明度レベルを作成しないでください。画像が使えません。

編集-小さな円にはキャンバス要素が含まれているはずです。疑似要素が最善の解決策であるかどうかはわかりません。

とにかくCSSでこれを行うことはできますか、それともキャンバスを使用する必要がありますか？

例 -

http://dabblet.com/gist/1566209

HTML：

<div id="foo">
    <div id="bar">
    </div>
</div>

CSS：

/**
 * Double Opacity
 */
body{background:green;}

#foo{
height:150px;
width:250px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}

#bar{
height:40px;
width:40px;
background:rgba(0, 0, 0, 0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
}

Answer 1

---

まとめ：

---

必要なものによっては注意が必要ですが、基本的なアプローチは非常に簡単です。

---

このアプローチは私の最初の考えとは少し異なります...しかし、これは同じ結果になります。

1. 円に黒/透明のパターンを作成し、に設定しました :before。
2. 次に、円が変換rotate(180deg)され、の角に合うように移動され<div>ます。
3. 次にopacity、その円のをに設定し0.6ます。
4. それ<div>自体はの影響を受けませんopacity。
5. :after次に、要素を追加し、画像を次のように配置しbackground ます（必要に応じてjsを介してこれを制御できます）
6. この要素をいかに簡単かつ独立して制御できるかを示すために、画像（、、）に border-radiusいくつかの効果を追加しました。box-shadowborder
7. 明るい背景を使用し、結果を表示するようにに設定opacityしました0.3

ここにフィドルがあります：http ： //jsfiddle.net/pixelass/nPjQh/4/

いくつかのクレイジーな結果については、このバージョンを見てください：http: //jsfiddle.net/pixelass/nPjQh/5/

これらの各例では、単一のdiv要素のみを使用しています

基本的なルール。（これらのルールは、jsで動的な動作を作成するために「使用できます」）

位置=絶対;

top = circleHeight / -2;

左=circleHeight/ -2; //（左=上）

回転=180度;

不透明度=valueAofBackground;

bgColor = valueRGBofBackground;

#inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.3);
    padding:20px;
    border-radius: 20px;
    border-top-left-radius: 0;
}
#inner:before {
    content: "";
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    height: 40px;
    width: 40px;
    border-radius: 40px;
    position: absolute;
    top: -20px;
    left: -20px;
    -webkit-transform: rotateZ(180deg);
    opacity:0.3;
}
#inner:after {
    content: "";
    background: url('http://lorempixel.com/10/10/sports/1/') no-repeat;
    background-position:0;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    position: absolute;
    top: -6px;
    left: -6px;
    -webkit-box-shadow: 0 0 10px rgb(255,255,255);
    border: 1px rgb(255,255,255) solid;

}

---

より良い説明

---

元のコメントバージョン http://jsfiddle.net/pixelass/nPjQh/10/

以下のコードのコメントを参照してください

#inner {
background: rgba(0,0,0,0.5) /*this is the full color-code of the div (with alpha)*/
}
#inner:before {
    /*the solid color of the circle = rgbValue of the div*/
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    /*opacity of the circle = alpha of the div*/
    opacity: 0.5;
}

この例は完全に透明divです...円は「pacman」の形です：http：//jsfiddle.net/pixelass/nPjQh/14/

---

円のオフセットの管理

---

円のオフセットを処理するこれらの例を見てください（PSEUDEO-ELEMENTSを使用しない）

OPのコードの1：1コピー（15pxオフセット）：http：//jsfiddle.net/pixelass/nPjQh/12/

オフセットがはるかに小さい（5px）： http ://jsfiddle.net/pixelass/nPjQh/13/

（コンテンツの不透明度は円と同じです）

オフセットはどのように機能しますか？

background-size対topとを制御するleft

ルール：

上=左;

background-size = elementHeight * 2 + top * 2;

円よりも大きい花（<div>疑似要素を持つ花も1つだけです）を見てください。background-size底に緑の葉を作成します

http://jsfiddle.net/pixelass/nPjQh/15/

---

現在の問題

---

このフィドルを参照してください：http：//jsfiddle.net/pixelass/nPjQh/16/

投稿の上部にある例に見られるように別のレイヤーを使用しない場合、コンテンツは透明になります。したがって、円の内側の画像のみが必要な場合は、上記の例で問題なく機能します。

この問題を解決する方法

円の中にキャンバスまたは別のdivが必要な場合は、円をdivに配置し、必要なdivを円の上に重ねる必要があります。

このフィドルを参照してください：http：//jsfiddle.net/pixelass/nPjQh/17/

少し変更すれば問題なく動作します。フィドルからコードを取得する

---

異なる形状/高度なスタイリング

---

側面が平らな別の形状を使用する場合は、2つのdivの合計の周りに境界線を配置することも、ボックスシャドウを追加することもできます。

まだ...の単純なマークアップを使用しています。

<div id="foo">
    <div id="bar">
    </div>
</div>

ボックスシャドウのフィドルを参照してください：http：//jsfiddle.net/pixelass/nPjQh/21/

---

円に境界線を適用します

---

を使用-webkit-mask-imageして、円に境界線を追加できます。 http://jsfiddle.net/pixelass/nPjQh/24/

---

その他の例：

---

divの周りの4つの円

http://jsfiddle.net/pixelass/nPjQh/25/

マークアップ：

<div id="foo">
    <div id="bar1"></div>
    <div id="bar2"></div>
    <div id="bar3"></div>
    <div id="bar4"></div>
</div>

この手法を使用してツールチップを作成する

http://jsfiddle.net/pixelass/nPjQh/31/

マークアップ：

<div id="foo">
    <div id="bar"></div>
    I am a pure css tooltip with a semi-transparent background and a black border. <br/>
    My width is static an my height is dynamic...
</div>

Answer 2

不透明度を個別に行うのが唯一の方法だと思いますが、

例： http： //dabblet.com/gist/1566278

Answer 3

これはどうですか：http：//jsfiddle.net/rudiedirkx/TqRCw/

（Dabbleの編集者は最悪です!!）

悲しいことに、疑似要素だけでは実行できません=（

疑似要素のみで実行できます！pixelassの答えを参照してください。ただし、CSS3は必須です。

Answer 4

改訂された回答

このフィドルはIE9と互換性があり、私の元の回答に必要な背景の重複を解決します。疑似要素を使用して円を生成します。このソリューションは、pixelassの「pacman」アイデアをスピンオフします。新しい背景グラデーションcssを使用して生成する代わりに、古い（ほとんど使用されていない）clipプロパティを使用して2つの部分で円を作成します。これにより、サークルがコーナーの「中心」にないという問題が解決しました。

#foo {
    height:150px;
    width:250px;
    background: rgba(0, 0, 0, 0.6);
    position:absolute;
    left:40%;
    top:20%;
}

#bar {
    height:40px;
    width:40px;
    position:absolute;
    top:-15px;
    left:-15px;
    line-height: 40px;
}

#bar:before,
#bar:after {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 40px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

#bar:before {
    clip: rect(0 40px 15px 0);
}

#bar:after {
    clip: rect(15px 15px 40px 0);
}

元の回答

これを行うことができます（フィドルを参照）。下の円を押して、疑似要素と重なる部分を「オーバーレイ」して、ボディの背景色を再確立します。

body{background:green;}

#foo{
height:150px;
width:250px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}

#bar{
height:40px;
width:40px;
background:rgba(0, 0, 0, 0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
z-index: -1;
}

#bar:after {
    content: '';
    display: block;
    background: green;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
}

Answer 5

このような重複する要素の「ホバー」とともに、このシナリオを処理するためのQ/Aを作成しました。

不透明度のある重複した要素と、それらの「ホバー」の処理。

解決策は、基本的に、子要素に直接ではなく親レベルで不透明度を設定し、JSを使用してホバー中にそれらを切り替えることです。

---

HTML

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>

---

JS

$(".first, .second").hover(function() {
  $(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});

CODEPEN

お役に立てれば。