將CSS插入框陰影添加到子圖像頂部的父元素

Question

我試圖將子陰影添加到子元素位於其中的父對象。我想要插入的陰影重疊圖像。

我的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>上的不透明度將其推到陰影后面，另一種方法是將嵌入陰影放置在圖像頂部。我更喜歡第二種方法，因爲可以保留圖像的完全不透明度。

注：我已經使邊框變大而變紅。

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: ""; 
}