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

回答

相關問題