+ 4

How can we add linear gradient to an image?

I want an image with opacity = 1 at top and opacity = 0 at the bottom. Can anyone answer this question?

4th Jun 2019, 4:09 PM
Chirayu Joshi
Chirayu Joshi - avatar
5 Respuestas
+ 4
For dark background, use background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url(image.jpg) no-repeat; background-size: cover; For white background, use background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)), url(image.jpg) no-repeat; background-size: cover;
5th Jun 2019, 12:06 AM
Calviղ
Calviղ - avatar
+ 3
In the same image, it is difficult, and many browers don't support it. My recommendation is editing the image in a image editing application, then uploading it into imgur, then copying it into your code. From ten minutes of thinking and researching, that is the best way. You can easily change an image's opacity in a linear gradient fashion easily. Hope this helps!!
4th Jun 2019, 4:45 PM
River
River - avatar
+ 3
That's what I was thinking. Like I said, probably best altering the picture rather than code. There IS a way to change it, but not easy.
5th Jun 2019, 10:25 AM
River
River - avatar
+ 1
Thank you for your effort to help me, but i want image's gradient to be transparent instead of any particular colour.
5th Jun 2019, 10:13 AM
Chirayu Joshi
Chirayu Joshi - avatar
+ 1
Here’s a full tutorial on CSS Graidents including how to use the linear-gradient property: https://youtu.be/TYHFe4L9bfo
25th Oct 2019, 10:15 AM
Dev Dreamer - YouTube
Dev Dreamer - YouTube - avatar