レイヤーのレイヤーの不透明度

2つのレイヤーがあり、どちらもブレンドしたいと思います。どのように透明度を変更して、上部のオーバーラップ領域から見えるようにすることができますか？あなたがz-index、positionを使用する必要がレイヤーのレイヤーの不透明度

2011-08-14 Aussay Marshal

、およびopacity

HTML：

<div id="layer1"></div> 
<div id="layer2"></div>

CSS：

#layer1, #layer2 { 
    position:absolute; 
    top:0; 
    left:0; 
    width:500px; 
    height:500px; 
} 

#layer1 { 
    z-index:0; 
    background-color:red; 
} 

#layer2 { 
    z-index:1; 
    background-color:blue; 
    opacity:0.5; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
}

デモ：http://jsfiddle.net/AlienWebguy/QqEdb/

出典

2011-08-14 01:58:53 AlienWebguy

ありがとう、これを行うには別の（IEフリー）のCSSの方法はありますか？ –

@Serious Ragged Hippie：これはIE特有のものではありません。なぜそう簡単なのであれ、互換性を犠牲にするのですか？とにかく、IEをターゲットにしていない場合は、私のコードを使用してください：D – Ryan

CSSを使用し、opacityタグを使用する必要があります。 IEの古いバージョンは非標準の設定を必要とするためには、仕事のビットを必要とするが、これは一例です：

.transparentLayer { 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 
    filter: alpha(opacity=50);     // IE7 or older 
    opacity: 0.5; // all real browsers 
}

変更0.5または50したい不透明度の量であることにする（0 =クリア、1/100 =固体）。

出典

2011-08-14 01:59:46 OverZealous

ありがとうOverZealous +1 –

あなたは実際に '+ 1'に十分なポイントがないので、OZに+1を与えます;） – AlienWebguy

達成する効果に応じて、CSS3 opacityプロパティ、またはrgbaまたはhslaという表記の要素の背景色を使用します。参照してください：http://jsfiddle.net/minitech/sN8uU/

出典

2011-08-14 02:03:53 Ryan

Goodフィルタリング：alpha（opacity = 50）; 'div：last-of-typeセレクタの中でM $はフィルタを決して見ないようにします;） – AlienWebguy

@Alien Trolling IE'：） ' –

苦しい時間の仲間:) – AlienWebguy

レイヤーのレイヤーの不透明度

答えて

関連する問題