的<section>

Question

CSS3漸變底部我一直在尋找高有低，但我還沒有找到一個CSS3一種使用linear-gradient到<section>標籤的底部漸變爲白色。

如果我不清楚，讓我舉一個例子來說明這一點。如果我有一個<section>標籤，裏面有很多文字，我希望文字在指定的高度被剪掉。爲了表明還有更多的文本要被讀取，容器會顯示一個白色的漸變，部分覆蓋最後一行，以表明還有更多的文本需要閱讀。

我知道這可以用PNG或GIF來完成，但我不知道如何用CSS3來做到這一點。有人可以提供一個例子嗎？

謝謝你的時間。

Answer 1

你可以做一個額外的元素和一些JavaScript。就像這樣：

#some-section { 
    position: relative; 
} 

#some-section .after { 
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), white); 
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), white); 
    background-image:  -ms-linear-gradient(rgba(255, 255, 255, 0), white); 
    background-image:  -o-linear-gradient(rgba(255, 255, 255, 0), white); 
    background-image:   linear-gradient(rgba(255, 255, 255, 0), white); 
    bottom: 0; 
    left: 0; 
    height: 20px; /* Whatever suits you */ 
    position: absolute; 
    right: 0; 
} 

和JavaScript：

var section = document.getElementById('some-section'); 
var after = document.createElement('div'); 
after.className = 'after'; 

section.appendChild(after); 

section.addEventListener('scroll', function() { 
    after.style.bottom = -section.scrollTop + 'px'; 
}, false);​ 

Here's a working demo.