將圖像淡化爲透明，如漸變

我希望將圖像（背景圖像）淡入透明，以便背後的內容實際上可以看到（幾乎不用透明）。將圖像淡化爲透明，如漸變

我可以用PNG圖像來實現它，但我需要問我的圖形設計師每次改變圖像的時候我想改變start => stop透明點（也許我想要更多的顏色或者我想要更少的顏色和更多的透明度）。

有沒有可能用CSS3達到同樣的效果？我嘗試在JPG（和PNG）上應用漸變透明，但除非PNG已經完成了透明度（並且基本上是漸變）（這使得CSS漸變無用），否則我無法看透它。

有什麼建議嗎？我正在通過網絡深入挖掘，但似乎我沒有使用正確的關鍵字，也許這是不可能的。

更新1：

典說不是很多的話多了，我想這樣做（但語法顯然是錯誤的）：

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));

來源

2013-10-31 Fire-Dragon-DoL

你需要搜索「掩蔽」。儘管如此，DICULT讓它能夠跨瀏覽器工作。 – vals

哦，你的建議非常好，我沒有找到正確的關鍵字。好的，我在網上查了一下，我確定只支持IE10 +/Chrome最新版本/ firefox最新版本。如果我有這些問題，顯然我不能使用它。 –

完全重寫我的以前的回答，因爲我看起來完全誤解了這個問題。

如果你想這樣的：

enter image description here

你可以這樣做：

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

更新1

如果你想在其他瀏覽器中這樣做，它不會那麼容易。 Firefox需要一個SVG，IE需要一整套工作。

來源

2013-10-31 18:51:07 bishop

是的，但以這種方式，圖像不會透明，我錯了嗎？因此，如果我在#under div後面有一些文字，我無法通過圖像看到它。我之前正在測試類似的東西。 –

正確，圖像不會透明。如果＃後面有文字，它將被覆蓋（假設自然堆疊順序）。你可以用z-index來解決這個問題。我在我的回答中發佈了更新。 – bishop

問題是我需要文字淡入圖像，這是我的主要目的。 –

如果你只是想淡出的背景顏色（白色，在這種情況下）看到這裏的工作示例：

http://jsfiddle.net/yw9v7zm5/

的.css的圖像div容器用途：

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

來源

2015-04-06 04:00:24

此解決方案適用於所有可以使用BrowserStack測試的IE/FF/Chrome/Safari！ – ZedTuX

將圖像淡化爲透明，如漸變

回答

相關問題