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+