グラデーションカラーの画像私はグラードカラー画像を作るために、このソリューションが存在しているはず

Question

：

background: -webkit-linear-gradient(left, #f5f7f8 50%, #fff), url("image.jpg"); 

しかし、どのような私のイメージは<img src="image.jpg">のようなHTMLタグで呼び出された場合はどうですか？

これは、それが白い勾配の5％でどのように見えるかであるおかげ

Answer 1

よりも、この

.pickgradient { 
 
    display:inline-block; 
 
    background: -webkit-linear-gradient(left, transparent 95%, #fff) 
 
} 
 

 
img{ 
 
    position:relative; 
 
    z-index:-1; 
 
    display:block; 
 
    height:200px; width:auto; 
 
}

<div class="pickgradient"> 
 
    <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" /> 
 
</div>

などのIMGの上にオーバーレイを作ります

Answer 2

...

.main-header { 
 
padding-top:200px; 
 
height:200px; 
 
background: -webkit-linear-gradient(left, transparent 95%, #fff), url("https://www.w3schools.com/css/trolltunga.jpg") no-repeat center; 
 
background-size: cover; 
 
}

<div class="main-header"><div>