我可以在div末尾淡出文本嗎？

正如我滾動我怎麼能淡出文本在背景圖像的頂部，而不使用圖像？我可以在div末尾淡出文本嗎？

我知道人們負荷將來到這裏，並告訴我，每一個理由爲什麼要使用的圖像可以但是沒有它做什麼？

任何意見將不勝感激...

來源

2011-08-15 Andy

所以你想淡入部分的文本在div但不是所有的文本？ –

我不明白你的問題，你只是想當一個文本徘徊在一個div褪色？的 – Loktar

可能重複[梯度阿爾法淡出與CSS 3的效果]（http://stackoverflow.com/questions/3543887/gradient-alpha-fade-out-effect-with-css-3） –

你必須與其他元素（最好是僞元素）來覆蓋你的DIV，並在其上具有背景梯度，符合DIV的背景顏色。

假設你的背景是黑色的，你會使用這個：

div { 
    position: relative; 
} 
div:before { 
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 100%); 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 50px; 
}

這裏的小提琴：http://jsfiddle.net/SFYrg/

你顯然必須添加所有這些供應商前綴。

來源

2011-08-15 18:42:18

好主意，感謝您的輸入...可以用JS來完成跨瀏覽器兼容性嗎？ – Andy

如果您懶得自己添加所有這些前綴，請使用：https：//github.com/codler/jQuery-Css3-Finalize。如果我的答案解決了你的問題，那麼接受它，以便其他人來這個帖子會知道答案。 –

:)它不是關於懶惰......我有一個非常獨特的問題，這將是最好的服務與JS，因爲有一個彩色背景圖像涉及。 – Andy

如果你不想使用圖像，你可以使用一個梯度相反，在這將您的內容DIV的頂部疊加一個div。

可以使用http://www.colorzilla.com/gradient-editor/快速生成你的梯度，與所有瀏覽器特定的前綴。

來源

2011-08-15 18:40:52

請記住，這與舊瀏覽器，特別是IE兼容性問題。 –

這是一個不同的方法謝謝...我想知道它是否可以通過使用JS或其他東西字面完成... – Andy

$("myElement").fadeOut("slow");

將文本放入某種容器中並用jQuery淡出。你不需要任何圖像。

來源

2011-08-15 18:40:52

我可以在div末尾淡出文本嗎？

回答

相關問題