user3299251 user3299251 - 8 months ago 51
CSS Question

CSS Image to transparant

I want to create a background image which will flow into transparency.

I've found a lot of ways to put a gradient on a background image and that is working and all but i can't find how to let a image go to transparency. I even doubt if it is possible.

So again, i'm not looking for a gradient OVER a image but the image itself should be the gradient. I did find a way with a mask but that would make the whole div go from visible to invisible incl. everything in that div.

Would love some help! Thanks in advance.

Answer Source

You can use webkit-mask-image. Check Mozilla Developer network:

https://developer.mozilla.org/en/docs/Web/CSS/mask-image

Browser Support for webkit-mask:

http://css3clickchart.com/#masks

Check JS Fiddle

Code:

content: "";
  background: url(https://images-na.ssl-images-amazon.com/images/G/01/img16/pet-products/vertical-store/promo-tiles/short-tile/32445_petsproducts_march-pets-site-flip-vertical-store_9_short-tile_592x304._CB299747463_.jpg) ;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))