為div創建線性透明漸變

Question

我想為div創建一個線性透明漸變。 有沒有辦法用jquery做到這一點？ 或者我應該使用像raphaeljs這樣的其他庫嗎？ 我想達到如下效果：

Answer 1

為什么不保持輕便和瀏覽器兼容。

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

Answer 2

你可以用CSS3做到這一點：

例如

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 3

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

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

Answer 4

這里棘手的一點是，示例中的漸變均勻映射到文本和容器。 正如很多人所展示的那樣，將透明漸變映射到背景屬性很容易，但這會使文本保持不變。

不幸的是，我認為沒有任何直接的方法來獲得您想要的漸變效果而不做出一些妥協，這取決於您的需求，它們可能是值得的解決方案。 因此，為此，有兩個示例，說明如何使用<canvas>實現示例圖像中顯示的效果。

偽造它

在JSLint上演示。

這很簡單，您可以在文本塊上放置<canvas>元素，然后繪制從完全透明到文本塊下方背景顏色的漸變。 它不是真的透明，所以它實際上並沒有透露下面的任何信息，但是如果你試圖淡化為固定的，預定的顏色，那么這種效果非常好。

2.畫布文字

在JSLint上演示

此示例更復雜，但完全復制了示例中顯示的透明效果。 從本質上講，它完全拋棄了HTML文本塊，只是將整個shabang繪制到<canvas> 。 但是，它有一些缺點：

1. 畫布似乎不喜歡包裝文本，因此您必須指定單獨的行。

2. Canvas文本可能仍然有些模糊的瀏覽器實現。

3. 可訪問性和搜索引擎優化，盡管您可以輕松編寫一個jQuery插件，用於在運行時將帶有文本的常規DOM元素轉換為此解決方案。

Answer 5

正如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;
}

Answer 6

不確定你究竟在尋找什么，但看看Gradienter jQuery插件 。

Answer 7

我使用Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ checkout創建了這個，如果你喜歡的話

**編輯**

我通過添加一個帶有漸變的rectagle並使其與div的大小相同來創建它