1

このように表示するために、これら 2 つの DIV が重なっているのを見ることは可能ですか?

<div style="position:relative;margin-top:100px;width:500px;height:300px;">
    <div style="background-color:rgba(23, 170, 180, 1);width:60px;height:145px;position:absolute;"></div>
    <div style="background-color:rgba(249, 177, 67, 1);width:110px;height:70px;position:absolute;"></div>        
</div>

最新の CSS3 または -webkit- プロパティのみを使用して動作する場合でも。

4

2 に答える 2

0

オーバーレイする div に不透明度を設定するだけです。すでにrgba()色の値を使用していますが、最後の単位だけ1を 1 未満に設定する必要があります。

#parent {
    position:relative;
    margin-top:100px;
    width:500px;
    height:300px;
}

#one {
    background-color:rgba(23, 170, 180, 1);
    width:60px;
    height:145px;
    position:absolute;
}

#two {
    background-color:rgba(249, 177, 67, 0.5);
    width:110px;
    height:70px;
    position:absolute;
}

http://jsfiddle.net/VAWPK/

コメントを読んで、div の重なり合っていない部分がアルファ値や不透明度の影響を受けないようにするには<canvas>/javascript、Nathan Lee がリンクしているようなプラグインを調べる必要があります。

于 2013-06-12T10:40:19.857 に答える
0

これを試してくださいこれがあなたに役立つことを願っています

<div style="position:relative;margin-top:100px;width:500px;height:300px;">
    <div style="background-color:rgba(23, 170, 180, 1);width:60px;height:145px;position:absolute; z-index: 1;
opacity: 0.5; left: 25px;"></div>
    <div style="background-color:rgba(249, 177, 67, 1);width:110px;height:70px;position:absolute;"></div>        
</div>

これを参照してくださいhttp://jsfiddle.net/xu8n5/1/

于 2013-06-12T10:51:41.100 に答える