子要素画像の上にある親要素にCSSのインセットボックスシャドウを追加します。

Question

子オブジェクト<img>がその内部に配置されている親オブジェクトに影を追加しようとしています。私は影をイメージに重ねるようにしました。

私のHTMLコードは次のとおりです。

<section class="highlights"> 
    <img src="images/hero.jpg" alt="" /> 
</section><!-- End section.highlights --> 

とCSS：

.highlights { 
    height: 360px; 
    padding: 0; 
    position: relative; 
    overflow: hidden; 
    opacity: 0.9; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    z-index:1; 
} 
.highlights img { 
    height: auto; 
    width: 100%; 
    margin: 0 auto; 
    display: block; 
    position: relative; 
} 

.highlights { 
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2); 
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2); 
} 

影が私のために表示されません。私は何を間違えたのですか？

Answer 1

問題は、画像がインセットボックスシャドウの上にレンダリングされることです。

<img>で不透明度を使用してシャドウの後ろにプッシュする方法と、イメージの上に挿入シャドウを配置する2つ目の方法が考えられます。画像の完全な不透明度を保持できるので、私は第2のアプローチを好む。

注：デモンストレーションのために、境界を大きく、赤にしました。

Solution 1 demo

HTML

<section class="highlights"> 
    <img src="http://lorempixel.com/500/360/city/1/" alt=""/> 
</section> 

CSS

.highlights { 
    height: 360px; 
    padding: 0; 
    position: relative; 
    overflow: hidden; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.highlights img { 
    height: auto; 
    width: 100%; 
    margin: 0 auto; 
    display: block; 
    opacity: .9; 
} 
.highlights { 
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2); 
    box-shadow: inset 0 0 25px 25px red; 
} 

Solution 2 demo

CSS

.highlights { 
    height: 360px; 
    padding: 0; 
    position: relative; 
    overflow: hidden; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.highlights img { 
    height: auto; 
    width: 100%; 
    margin: 0 auto; 
    display: block; 
} 
.highlights::before { 
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2); 
    box-shadow: inset 0 0 25px 25px red; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    content: ""; 
}