css - how to create a gradient effect on half of an image -


i trying create gradient effect on half of image, found gives full gradient overlay effect on image

.tinted-image {   background:      /* top, transparent red */      rgba(255, 0, 0, 0.25),     /* bottom, image */     url(image.jpg); } 

but wondering how can apply effect half of image,i searched online didnt see ws looking for, decided post.

by half of image mean vertically not horizontally

us there has idea of this

multiple backgrounds , suitable color stop in gradient.

.tinted-image {    width: 460px;    height: 300px;    border: 1px solid grey;    background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 50%, transparent 50%), url(http://www.fillmurray.com/460/300);    margin: auto;  }
<div class="tinted-image"></div>


Comments

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

serialization - Convert Any type in scala to Array[Byte] and back -

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -