Hinzufügen von CSS-inset box-shadow, um das parent-element over the top of a Kind Bild

Ich versuche, fügen Sie Schatten auf das parent-Objekt, in dem ein Kind <img> element positioniert ist drin. Ich wan die inset-Schatten überlagern das Bild.

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

Schatten ist nicht angezeigt für mich. Was habe ich falsch gemacht?

InformationsquelleAutor Caspert | 2013-08-02
  1. 17

    Das problem ist, dass das Bild gerendert wird, über die Oberseite des Einschub-box-shadow.

    Gibt es 2 Möglichkeiten, die ich denken kann, dies zu tun, mit "Deckkraft" auf der <img> zu schieben, hinter den Schatten, und der zweite Weg, um die position des inset-Schatten über der Oberseite des Bildes. Ich bevorzuge die zweite Methode, da Sie die volle Deckkraft des Bildes beibehalten werden kann.

    Hinweis: ich habe die Grenze groß und rot für die demonstration.

    Lösung 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;
}

    Lösung 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: "";
}
    • die pseudo-Klasse :before braucht nur einen Doppelpunkt
    • Dies ist CSS3. Bitte Lesen Sie developer.mozilla.org/en-US/docs/Web/CSS/::before
    • wt.. oO gut zu wissen, danke andyb!
    • Sorry, wenn mein Kommentar war ein bisschen hart, ich war in Eile als ich es geschrieben. Ich hätte wirklich gesagt, dass ja :before würde auch noch gut funktionieren, aber den doppelten Doppelpunkt eingeführt wurde in CSS3 die Unterscheidung zwischen den CSS-pseudo-Klassen (für Ausrichtung auf ein bestimmtes element ist-Zustand) und diese Elemente die kann Stil von teilen eines Dokuments.
    • dein Kommentar war hilfreich, keine sorgen andyb 😉 und danke nochmal
    • ich hatte Transformationen auf ein Bild, das waren Schatten nicht angezeigt, also habe ich z-index (wenn jemand hat das gleiche Problem)

    InformationsquelleAutor andyb
Schreibe einen Kommentar