Fügen Sie CSS-Inset-Box-Shadow zum übergeordneten Element über dem Anfang eines untergeordneten Bildes hinzu

Question

Ich versuche, Schatten zum übergeordneten Objekt hinzuzufügen, in dem ein untergeordnetes Element positioniert ist. Ich wische den eingefügten Schatten, um das Bild zu überlappen.

Mein HTML-Code ist:

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

und 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); 
} 

Der Schatten nicht für mich erscheint. Was habe ich falsch gemacht?

Answer 1

Das Problem besteht darin, dass das Bild über dem Inset-Box-Schatten gerendert wird.

Es gibt zwei Möglichkeiten, wie ich dies tun kann, eine mit Opazität auf der , um es hinter dem Schatten zu schieben und die zweite Möglichkeit, den eingelassenen Schatten über die Oberseite des Bildes zu positionieren. Ich bevorzuge den zweiten Ansatz, weil die volle Opazität des Bildes beibehalten werden kann.

Hinweis: Ich habe die Grenze groß und rot zur Demonstration gemacht.

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