CSSの設定方法不透明度の深さ

Question

ユーザーのアバターの不透明度をすべてのレイヤーから1レイヤーに設定したいと思います。 これには解決策がありますか？ z-indexなど何かがあるかもしれませんか？

Answer 1

私は、次の仮定を作るために持っていましたその他すべてのコンテンツ。

これは、サンプル画像を作成するために必要なhtml/cssの最小量です。

ここでのトリックはbackground-attachment: fixedです。これは他の要素にposition:fixedを使用するようなものです。これにより、背景画像（デフォルト）は、文書ではなくウィンドウに対して0px x 0pxになります。これをレイヤー1とレイヤー3に割り当てることで、レイヤー3が半透明でレイヤー1を表示しているという印象を与えるために、同じ背景イメージをエレメントに重ねることができます。

イメージを別のイメージに重ねて配置することに注意してください。レイヤー1の背景イメージのサイズを変更すると、レイヤー3では正しく表示されません。そのため、どんな解像度でも見た目が非常に大きな非常に大きな背景画像が必要な場合があります。

「透明度」を説明するために、私はレイヤー2に白い背景を塗りつぶしました。

[コードスニペットを実行]をクリックして新しい画像セットを読み込みます。あなたは、「レイヤーに」それを設定することはできません - 不透明度がどのように動作するかではありません

.layer1, 
 
.layer3 { 
 
    background: url(http://lorempixel.com/1000/800/sports/) no-repeat scroll 0 0 transparent; 
 
    background-attachment:fixed; 
 
} 
 
.layer2 { 
 
    background-color:#fff; 
 
    width:70%; 
 
    margin:0 auto; 
 
} 
 
.layer3 { 
 
    display:inline-block; 
 
} 
 
.layer3 img { 
 
    opacity:0.7; 
 
}

<div class="layer1"> 
 
    <div class="layer2"> 
 
    <ul> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/abstract/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/city/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/people/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/transport/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/cats/"/></div></li> 
 
     <li><div class="layer3"><img src="http://lorempixel.com/50/50/sports/"/></div></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

ボーダーCSSルールとして層 "2" にしてください。

レイヤー "3"を別々のコンポーネントに分割します。あなたのようにしてください白として背景を設定し、他のCSSルール：レッドコンポーネントの要件と背景ごとに透明

を境界線のサイズを設定します。グリーンコンポーネントの場合

。背景画像を使用しているレイヤ1以下にz-indexセットで固定<img.../>タグとは反対に、：あなたはあなたの質問で任意のHTML/CSSを含めていないよう