6

作成したい効果は、透明な境界線効果です。内側用と外側用の 2 つの div タグを使用してボックスを作成しました。`

ここに画像の説明を入力

これに使用した HTML は次のとおりです。

<div class="main_box_outer">
    <div class="main_box_inner">
    </div><!--/ inner-->
</div><!--/ outer-->`

これを作成するために使用したCSSは次のとおりです。

.main_box_inner {
width: 30em;
height: 20em;
background: white;
border-radius: 1em; }


.main_box_outer {
display: inline-block;
background: black;
padding: 1em;
border-radius: 2em; 
opacity:1; }

ただし、CSS で外側のボックス (ボーダー) の不透明度を変更すると、内側のボックスの div が外側のボックスの div 内に含まれているため、内側のボックスの不透明度も変更されます。内側のボックスの不透明度に影響を与えずに外側の不透明度を変更するにはどうすればよいですか?

4

2 に答える 2

9

背景色に rgba を使用します。

{ background: rgba(0,0,0,.5); }

JSFiddleで見る

rgba は、アルファ チャネル(不透明度)を含む色を定義する方法です。アルファ チャネルは、不透明度と同様に 0 から 1 に変化します。色セットを持つことができる任意のプロパティで使用できます: 色、背景、境界線など。

以前のバージョンの IE は rgba 色をサポートしていないことに注意してください。アルファ チャネルを 1 に設定するだけです。

于 2013-01-05T18:00:08.827 に答える
0

これは仕事です

.main_box_outer 
{
    display: inline-block;
    background: rgba(0,0,0,.5);
    padding: 1em;
    border-radius: 2em; 
    opacity:1; 
}
于 2013-01-05T18:24:50.357 に答える