-2

不透明度が div に適用されると、コンピューターはその div を他のすべての div (またはレイヤー) の上 (または表面レベル) にレンダリングすることを理解しています。

そうは言っても、4つの異なるdivを互いに配置しようとしています。各 div には異なる z-index があるため、それらは上下に重ねられます。不透明度に関する私の声明が真実である場合、不透明度を含むレイヤーは常に上に置かれ、画像全体が不透明になります。

私の質問は次のとおりです:不透明な品質なしで、コンピューターをだまして不透明度をレンダリングさせる方法はありますか?

ここに私のHTMLがあります：

<div id="wrapper">

<div id="subWrapper1">
    <div id="cyan">
        <img src="images/cyanObama.png" alt="Cyan Version" />
    </div>

    <div id="magenta">
        <img src="images/magentaObama.png" alt="magenta version" />
    </div>
</div>

<div id="subWrapper2">
    <div id="yellow">
        <img src="images/yellowObama.png" alt="yellow version" />
    </div>

    <div id="black">
        <img src="images/blackObama.png" alt="black version" />
    </div>
</div>

</div>

CSSは次のとおりです。

#subWrapper1{position: relative;
    display: block;}

#subWrapper2{margin-top: 262px;
    position: relative;
    display: block;}

#cyan{width: 555px;
    height: 555px;
    margin: 0;
    position: relative;
    display: inline-block;
    z-index: 10;}

#magenta{width: 555px;
    height: 555px;
    position: relative;
    display: inline-block;
    opacity: .7;}

#yellow{width: 555px;
    height: 555px;
    position: relative;
    display: inline-block;
    z-index: 20;
    opacity: .5;}

#black{
    width: 555px;
    height: 555px;
    position: relative;
    display: inline-block;
    z-index: 30;}

ここに JSFiddle があります: http://jsfiddle.net/hz2xy/1/

助けてくれてありがとう。

4

2 に答える 2

0

Photoshop で透明度のある画像を作成し、不透明度を適用する div に背景を適用し、その div の不透明度プロパティを削除します。

于 2013-09-23T05:42:13.863 に答える
-1

-webkit-filter を使用して、さまざまなレベルで明るさとコントラストを調整しました。試行錯誤しましたが、うまくいきました。

JSFiddle は次のとおりです: http://jsfiddle.net/hz2xy/2/

<div id="soICanPostFiddle"></div>
于 2013-09-23T06:56:40.073 に答える