CSS 图片转透明

Question

我想创建一个背景图像，它将流入透明。

我找到了很多在背景图像上添加渐变的方法，这些方法都有效，但我找不到如何让图像变为透明的方法。我什至怀疑这是否可能

所以，我不是在寻找图像上的渐变，而是图像本身应该是渐变。我确实找到了一种带面具的方法，但这会使整个 div 从可见变为不可见，包括。 div.

中的所有内容

Answer 1

您可以使用 webkit-mask-image。检查 Mozilla 开发者网络：

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

浏览器对 webkit-mask 的支持：

http://css3clickchart.com/#masks

勾选JS Fiddle

代码：

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)))

Answer 2

可以完成，但是您可能运行遇到跨浏览器支持的一些问题。

See older answer on stack overflow

-webkit-mask-image:-webkit-gradient(linear, left top, left bottom,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

<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)))
    }
  </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='http://verysmartbrothas.com/images/random.jpg?9fe95b' />
  </body>
</html>

CSS 图片转透明

CSS Image to transparent

css

gradient

image