css - 如何将水平文本淡化为垂直渐变？

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 <-- 实际上使用 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/