2010-04-13 188 views
6

我有一個元素,裏面有內容。Firefox不透明度(透明度)漸變 - 淡出圖像

元素 - 及其內容 - 應該在左側完全不透明,在右側完全透明。從右至左均勻分級。

由於合併到的內容和背景不固定,因此無法提前製作圖像。我知道漸變可以用作背景(-moz-linear-gradient),但是這並不能幫助我 - 在這裏,我需要元素本身的內容淡出。

我已經能夠在IE(Alpha Mask)和Webkit(image-mask)中做到這一點,但已經完全陷入了FF。

我不介意使用SVG,如果有方法。

請幫忙?

+0

最新的Firefox有自己的-webkit-mask-image可以與CSS3漸變一起使用嗎? – 2011-11-13 06:32:58

回答

4

此頁解釋瞭如何做到這一點的FF 3.5+

https://developer.mozilla.org/en/applying_svg_effects_to_html_content

你可能想是這樣的一個文件所謂mask.svg:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    baseProfile="full"> 
    <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
     <linearGradient id="g" gradientUnits="objectBoundingBox" x2="1"> 
      <stop stop-color="white" offset="0"/> 
      <stop stop-color="white" stop-opacity="0" offset="1"/> 
     </linearGradient> 
     <rect x="0" y="0" width="1" height="1" fill="url(#g)"/> 
     </mask> 
</svg> 

然後包括你的CSS如下:

mask: url(/path/to/mask.svg#m1); 
+0

最新的Firefox有自己的-webkit-mask-image可以與CSS3漸變一起使用嗎? – 2011-11-13 06:23:16

+0

感謝您的支持! – eSentrik 2015-05-28 14:40:10

-2

一個骯髒的解決方案是將div正好疊加在元素的頂部,使背景完全透明在左邊,完全不透明的在右邊使用線性漸變。

我知道這是不是很漂亮,但它應該工作;)

+1

我不明白這會有什麼幫助。我需要看到元素背後的背景,這是一個相當複雜和不斷變化的背景。如何用另一個div來實現這樣的結果呢? – SamGoody 2010-04-14 06:28:41

0

我認爲一個骯髒的解決方案可能是利用rgba值。有了這些,你就可以在一個div上設置一個webkit和moz漸變,這個div就是你所談論的內容的位置。

我不確定您是否可以獲得IE漸變的Alpha值。解決方案唯一的問題是,這個div背後的對象的交互性丟失了

+0

實際上,這個解決方案最大的問題是圖像不會變得透明。如果應該顯示的背景也具有漸變,則不會顯示 – SamGoody 2011-03-21 09:18:18