cssを使用した画像上のオーバーレイ

Question

cssを使用して画像の最上部にレイヤーを配置しようとしています。しかし何らかの理由でimgクラスが効果を発揮していません。

Htmlの -

<div class="slider"> 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> 
</div> 

デモ - https://jsfiddle.net/squidraj/b49a6xkd/

すべてのヘルプは高く評価されています。

Answer 1

背景色がimg要素の背後に表示されるように、背景色をimg要素に適用しています。代わりに擬似要素を使用してイメージをオーバーレイし、背景色を擬似要素に適用します。

.slider { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.slider .wrap { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.slider .wrap:after { 
 
    background: rgba(255, 255, 255, 0.5); 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
}

<div class="slider"> 
 
    <div class="wrap"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    </div> 
 
</div>

Answer 2

これは、psuedo elementsを使用することによって達成することができます。基本的にページにコンテナを追加し、background-colorをに設定すると、それはとなります。

The fiddle。私はあなたのためにjsfiddle提供

CSS

.slider:before { 
    content:''; 
    position:absolute; 
    display:block; 
    width:100%;; 
    height:400px; 
    background-color:rgba(255,255,255,.5); 
    z-index:1; 
} 

Answer 3

：前述のように https://jsfiddle.net/anp8wgqt/

を、あなたが表示するオーバーレイ用の画像の上にいくつかの要素を配置する必要があります。私は擬似要素を使ってここでやっています。あなたがすでに持っているのと同じマークアップです。偉大Excellent..Working

.slider { 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.slider img { 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 

 
.slider::after{ 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(255, 255, 255, 0.5); 
 
    opacity: 0; 
 
    transition: opacity 350ms; 
 
} 
 

 
.slider:hover::after { 
 
    opacity: 1; 
 
}

<div class="slider"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> 
 
</div>