如何將水平文本淡入垂直漸變中？

文本淡入淡出效果應該在左側顯示爲固定文字，而在右側淡出文字。在這個例子中，我讓你如何褪色木星看起來像地球和火星只使用CSS？如何將水平文本淡入垂直漸變中？

.hello-jupiter { 
    display:inline-block; 
    background: rgba(215, 215, 215, 1); 
    color:white; 
    box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75); 
}

enter image description here

jsfiddle < - 實際使用箱shaodw，而不是一個梯度

來源

2013-02-04 user1873073

這裏有一個答案工作。我只是向右移動了一個div，從0到100％不透明度。

.hello-jupiter { 
    display:inline-block; 
    background: rgba(215, 215, 215, 1); 
    color:white; 
    box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75); 
    position:relative; 
} 

.fader { 
    position:absolute; 
    top:0px; 
    right:0px; 
    display:block; 
    width:75px; 
    background: -webkit-linear-gradient(left,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 75%) 
}

enter image description here

http://jsfiddle.net/w92xv/45/

來源

2013-02-05 03:03:04 user1873073

我發現這個網站是非常方便的CSS ...

http://www.css3maker.com/css-gradient.html

CSS從css3maker網站生成：

.hello-jupiter { 
    display:inline-block; 
    background: rgba(215, 215, 215, 1); 
    color:white; 
    background:-webkit-gradient(linear, 100% 0%, 37% 0%, from(#FFFFFF), to(#000000)) 
}

這將僅適用於Chrome和Safari 4.0+版本

來源

2013-02-04 05:49:22

這只是產生的梯度。問題是你如何將文本漸變成漸變 – user1873073

沒問題，整晚都在睡覺，並誤讀了完整的請求。試試這個：http://stackoverflow.com/questions/7942953/best-way-to-make-text-look-fading-away –

限於webkit，但也有這樣的：http://css-tricks.com/snippets/CSS /梯度文本/ –

如何將水平文本淡入垂直漸變中？

回答

相關問題