web-dev-qa-db-ja.com

2つの重複するdivの「二重不透明度」を処理する方法

2つのdivがあり、どちらも不透明度0.6です。私はそれらを重ねる必要がありますが、それらの不透明度を保持し、新しい結合された不透明度レベルを作成しません。画像が使用できません。

編集-小さな円にはキャンバス要素が含まれているはずです。疑似要素が最適なソリューションになるかどうかはわかりません。

これを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;
}
cssopacitycss-shapes
32
tripleZee

要約：

必要なものによっては難しい場合もありますが、基本的なアプローチはかなり単純です。

それについての記事全体をここに書きました：

読みやすいかもしれません。

http://dream-world.us/2012/01/07/overlapping-transparent-divs-with-one-border/

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

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

ここに問題があります： http://jsfiddle.net/pixelass/nPjQh/4/

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

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

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

位置=絶対;

top = circleHeight/-2;

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

回転= 180度;

opacity = 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 ...円は「パックマン」です-形状： http://jsfiddle.net/pixelass/nPjQh/14/

pacman shaped circle

円のオフセットの管理

円のオフセットを処理するこれらの例を見てください（NOT USING 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/

one div makes a flower

現在の問題

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

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

conent is transparent

この問題を解決する方法

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

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

少し変えてみればうまくいきます。親からコードを取得する

correcting the opacity issue

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

側面が平らな別の形状を使用する場合は、2つのdivの合計の周りに境界線を付けることもできます。

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

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

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

adding a box-shadow

円にボーダーを適用します

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

border on round element

その他の例：

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

4 circles

このテクニックを使用してツールチップを作成する

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

css tooltip

39
user950658

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

例えば http://dabblet.com/Gist/1566278

10
Andrew

改訂された回答

このフィドル は 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;
}
2
ScottS

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

（ダッブルの編集者はうんざり!!）

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

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

2
Rudie

このシナリオを処理するための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 [〜＃〜]

お役に立てれば。

0
Gibin Ealias