靠近div末尾的淡入淡出文字？

是否可以使用CSS在div末尾水平淡化文本。靠近div末尾的淡入淡出文字？

例如像這樣：

enter image description here

來源

2013-03-30 user966582

漸變疊加，圖像疊加，特定瀏覽器的過濾器... –

我投的圖像疊加，除非瀏覽器被指定 –

怎麼樣使用'文本溢出：ellipsis'呢？ –

CSS梯度和rgba將做的工作爲這個

Demo

Extended Text Version（更新）

div { 
    position: relative; 
    display: inline-block; 
} 

div span { 
    display: block; 
    position: absolute; 
    height: 80px; 
    width: 200px;  
    right: 0; 
    background: linear-gradient(to right, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,1))); 
    background: -webkit-linear-gradient(left, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%); 
    top: 0;

}

注：我已經剝去跨瀏覽器的CSS代碼梯度，就可以得到從http://www.colorzilla.com/gradient-editor/

關於rgba()它最近在CSS3規範中介紹過，我希望你知道RGB代表的是什麼，a代表alpha，所以不是使用HEX我使用RGBA和我剛剛與阿爾法部分在這裏玩

來源

2013-03-30 20:14:54

爲什麼-1？：O原因？ –

我認爲您應該將其更新爲與Webkit兼容;這些是一些流行的瀏覽器 –

在這裏，我們去，-2和爆炸藥丸，這只是我不想在這裏轉儲大量的代碼，但我只是做一個演示 –

沒有真正跨瀏覽器友好的，但你可以使用類似：

-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%); 
mask-image: linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);

來源

2013-03-30 20:11:36

哪些瀏覽器當前支持這兩種版本？ –

http://caniuse.com/#search=mask並不多... –

那麼，這是W3C公認的webkit功能嗎？ :-) –

跳繩IE9-，這可能需要一個圖像或SVG，你可以添加一個position: absolute DIV覆蓋全寬，並具有部分透明的梯度漸變變白。該div必須包含在您想要覆蓋的元素中，該元素必須是position: relative。

http://jsfiddle.net/JcPAT/

來源

2013-03-30 20:17:59

靠近div末尾的淡入淡出文字？

回答

相關問題