爲div創建線性透明漸變

Question

我想爲div創建線性透明漸變。有沒有辦法用jQuery來做到這一點？或者我應該使用一些其他類似raphaeljs的圖書館嗎？我想實現類似如下效果：

Answer 1

爲什麼不保持輕盈和瀏覽器兼容。

div 
{ 
    backgroud-image: url('images/gradient.png'); 
    background-repeat: repeat-x; 
    background-position: top right; 
} 

Answer 2

不知道你正在尋找什麼，但看看Gradienter jQuery plugin。

Answer 3

你可以用CSS3做到這一點：

E.g.

div { 
    opacity: 0.5; 
    background: #999; /* for non-css3 browsers */ 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 
} 

http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

http://gradients.glrzad.com/

http://www.colorzilla.com/gradient-editor/

http://css-tricks.com/css3-gradients/

Answer 4

我建立這個使用聖拉斐爾JS http://www.jsfiddle.net/pahnin/fsdnW/4/ 結帳如果u喜歡它

** **編輯

我通過添加具有梯度的rectagle並使其爲相同的尺寸創造了它div

Answer 5

這裏棘手的一點是，您示例中的漸變均勻地映射到文本以及容器。很多人已經顯示，將透明漸變映射到背景屬性很容易，但這會使文本保持不變。

不幸的是，我認爲沒有任何直接的方法可以獲得您想要的漸變效果而不做任何妥協，具體取決於您的需求，它們可能是有價值的解決方案。因此，爲了達到這個目的，下面是兩個使用<canvas>的示例，瞭解如何實現示例圖像中顯示的效果。

1.作假

Demo on JSLint.

這很簡單，你在你的文本塊中<canvas>元素位置和完全透明的漸變繪製文本塊下方的背景顏色。這不是真的透明，所以它實際上並沒有透露下面的任何信息，但如果你試圖褪色到一個固定的，預定的顏色，那麼這工作得很好。

2.帆布文本

Demo on JSLint

這個例子是比較複雜的，但完全複製在你的例子所示的透明效果。本質上，它完全拋棄HTML文本塊，並將整個shabang繪製到<canvas>上。但是，它也有一些缺點：

1. 畫布似乎並不喜歡 文字換行，所以你必須指定 各條線。

2. 帆布文本可能仍然有幾分低迷瀏覽器實現。

3. 可訪問性& SEO，儘管您可以輕鬆地編寫一個jQuery插件，用於在運行時將帶有文本的常規DOM元素轉換爲此解決方案。

Answer 6

我使用jquery和112 div創建它。十行文本div的父div更加透明，而100 div的背景div更透明。

http://jsfiddle.net/generalhenry/bDd5w/

Answer 7

由於bArmageddon指出，接受的解決方案不能解決問題 - 它只是褪色的背景。一個簡單的解決方案是使用：before或：after在文本上添加漸變：

div { 
    position: relative; 
} 
div:before { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 20px; 
    background: url("transparent_fade.png") repeat-x; 
}