그라데이션

Question

안녕하세요 (없는 배경 이미지) 이미지와 효과 이런 종류의 갖고 싶어 :

는 u는 내가이 효과를 만드는 방법을 어떤 생각을 가지고 있습니까를 CSS로? 이것

Answer 1

당신은 IMG 외부 그라데이션 용기를 사용하여 컨테이너 뒤에 밀어 화상의 마이너스 Z 인덱스를 설정할 수있다.

<div class="gradient-bg"> <img src="http://img.phombo.com/img1/photocombo/1634288/hd-wallpapers-scenic-desktop-wallpaper-beautiful-fresh-nature-scenery-sunrise-1920x1080-wallpaper.jpg"> <span>Hello There</span> </div>

.gradient-bg{ 
display: inline-block; 
background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(249, 249, 249, 0.89) 100%); 
background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); 
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%); 
background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%); 
background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%); 
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000',GradientType=0); 
} 
span{ 
position: absolute; 
top: 183px; 
} 
img{ 
position:relative; 
z-index:-1; 
display:block; 
height:200px; width:auto; 

}

사용 상고 폭 따라서 그라데이션.

This is sample code for the solution

Answer 2

보면 :

img { 
 
    width: 400px; 
 
} 
 

 
.content { 
 
    background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0; 
 
    position: relative; 
 
    margin-top: -200px; 
 
    height: 200px; 
 
}

<img src="http://www.dl.21tech.ir/img-upload/2016/12/95092801.jpg" /> 
 
<div class="content"></div>