CSS图像透明

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

我发现了很多方法来把梯度放在背景图像上，这是工作和所有，但我找不到如何让图像去透明。我甚至怀疑这是否可能。

所以再次，我不是寻找一个梯度在图像上，但图像本身应该是渐变。我确实找到了一个面具的方式，但这会让整个div从可见到不可见的包括。该部分中的所有内容。

会喜欢一些帮助！提前致谢。

2016-11-22 user3299251

的可能重复http://stackoverflow.com/questions/19713813/fade-image-to-transparent-like-a-gradient –

@ KilianStinson这就是为什么我描述我的问题，“我确实找到了一个面具的方式，但这将使整个div从可见到无形，包括该div中的所有内容。” 这是我用过的例子，但正如你可以看到那里的文字等也变得透明。这是该解决方案的问题。 – user3299251

您可以使用webkit-mask-image。检查Mozilla开发者网络：为WebKit的面具

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

浏览器支持：

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

来源

2016-11-22 09:26:13 Veer

正确。这正是我正在寻找的，但使用面具将使该div透明度的一切。所以是的，这是我正在寻找，但我需要在div本身正常的一切。在这里你可以看到文字也在消失。 – user3299251

没关系这就是答案！只需更改覆盖文本/内容的z-index，就像我想要的那样。 – user3299251

可以做到^ h不过，您可能会遇到一些跨浏览器支持的问题。

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>

来源

2016-11-22 09:41:11 JSouthward

回答

相关问题