Kann keinen linearen Farbverlauf über img hinzufügen

Question

Ich habe Probleme beim Hinzufügen eines linear-gradient Stils zu einem img Elternteil div. Ich habe erreicht, was ich will, indem ich das Bild als div 's-Hintergrundbild, im Gegensatz zu als img lade, aber das erfordert mehr das Stylen, um dasselbe zu machen. Ich bin mir nicht sicher, ob ich etwas verpasse.

Hier ist mein Markup:

<div id="owl-demo" class="owl-carousel owl-theme"> 
    <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div> 
    <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div> 
    <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div> 
    <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div> 
</div> 

Sass:

#owl-demo { 
    .owl-item { 
    background-image: linear-gradient(to bottom, transparent 50%, #191919 100%); 
    } 
} 

Arbeitsbeispiel: http://codepen.io/ourcore/pen/vygGeP

Answer 1

Set Sie img-z-index: -1; und es sollte funktionieren (nicht vergessen position: relative; auch hinzufügen).

So:

.owl-carousel .owl-item img { 
    position: relative; 
    z-index: -1; 
} 

Codepen