css - Fade image to transparent like a gradient

Question

Welcome To Ask or Share your Answers For Others

css - Fade image to transparent like a gradient

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

I would like to have an image (a background image) to fade to transparent so that content behind it can actually be seen (barely, thanks to transparency).

I can achieve it obviously with a PNG image, but I need to ask to my graphic designer to change the image every time I want to change the start => stop transparency points (maybe I want more color or maybe I want less color and more transparency).

Are there any chance I can achieve the same effect with CSS3? I tried applying a gradient to transparent on a jpg (and a png) but I can't see through it unless the PNG has already transparency (and basically the gradient) already done (which makes the css gradient useless).

Any suggestion? I'm digging hard through the web but seems like I'm not using the right keyword or maybe it's not possible.

Update 1:

Code says more than a lot of words, I would like to do something like this (but the syntax is obviously wrong):

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

568 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T02:45:57+0000

If you want this:

enter image description here

You can do this:

<html>
  <style type='text/css'>
    div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
    img {
      -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    }
  </style>
  <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
    <img src='https://i.imgur.com/sLa5gg2.jpg' />
  </body>
</html>

Categories

css - Fade image to transparent like a gradient

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags