배경 이미지 그래디언트가 적용되지 않습니다.

Question

부모 이미지에 이미지 그래디언트를 적용하려고하는데 효과가 없습니다. 이상한 이미지이므로 이전에 해 보았습니다.

<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을 적용하여이를 달성 할 수 있었다 : 나는 objcet-fit 아무튼 인라인 이미지가 아닌 배경을 통해 그것을 할 제안

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

을 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> 태그를 사용 아마도 수 편집 .