如何将水平文本淡入垂直渐变？

Question

文本淡出应该在左侧显示纯文本，在右侧显示淡色文本。在这个例子中，我制作了如何使用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);
}

jsfiddle＆lt; - 实际上使用了box-shaodw而不是渐变

Answer 1

我觉得这个网站对CSS来说很方便......

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

从css3maker网站生成的CSS：

.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 +

Answer 2

这是一个答案。我刚刚向右侧浮动一个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%)
}

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