背景画像のグラデーションが適用されない

Question

画像上にグラデーショングラデーションを適用するときに、画像を親のdivに設定しますが、これは効果がありません。

<header id="hero"> 
    <div id="hero-image"> 
    <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Hero%20Image&w=1920&h=500" /></a> 
    </div> 
</header> 

header#hero { 
    margin: 0 auto; 
    width: 100%; 
    font-size: 1rem; 
} 
header#hero #hero-image { 
    background-image: linear-gradient(transparent 50%, black 100%); 
} 
header#hero #hero-image img { 
    display: block; 
    width: 100%; 
    max-height: 500px; 
    object-fit: cover; 
} 

デモ：http://codepen.io/ourcore/pen/xgqNZJ

Answer 1

私は#hero-image imgにposition: relativeとz-index: -1を適用することによって、これを達成することができました：

header#hero { 
    margin: 0 auto; 
    width: 100%; 
    font-size: 1rem; 
} 
header#hero #hero-image { 
    background-image: linear-gradient(transparent 50%, black 100%); 
} 
header#hero #hero-image img { 
    display: block; 
    position: relative; 
    width: 100%; 
    max-height: 500px; 
    object-fit: cover; 
    z-index: -1; 
} 

Answer 2

私はobjcet-fit doesnのような背景ではなく、インライン画像を経由してそれを行うことをお勧めしますまだIEとEdgeで作業していません。グラデーションと画像は、複数の背景を使用して同じ要素に設定できます。

#hero-image { 
 
    height: 200px; 
 
    background: linear-gradient(transparent 50%, black 100%), url("//dummyimage.com/2000x1000") center/cover; 
 
} 
 
#hero-image a { 
 
    display: block; 
 
    height: 100%; 
 
    color: rgba(0,0,0,0); 
 
}

<div id="hero-image"> 
 
    <a href="#">Hidden link text</a> 
 
</div>

編集

画像を動的に追加する必要がある場合、あなたはおそらくインラインstyle="..."属性でそれを行う、または<style>...</style>タグを使用することができ、それはかなりどこにでも配置することができます。