Fade image to transparent like a gradient

前端未结

关注

 2  1662

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 achi

相关标签:

2条回答

忘了有多久

2020-12-04 22:31

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>

0 讨论(0)

梦如初夏

2020-12-04 22:35

If you just want to fade to the background color (white, in this case) see the working example here:

http://jsfiddle.net/yw9v7zm5/

.css for the image container div uses:

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

0 讨论(0)