Question

无论如何，我可以制作文字渐变吗？我有这个

<p>TEXT</p>

可以用css以某种方式从上到下制作文本渐变吗？

我想要得到相同的结果 background: linear-gradient(#fbfbfb, #f2f2f2);

但仅适用于文字而非整个背景。我看起来像这样：

color: linear-gradient(#fbfbfb, #f2f2f2);

Answer 1

对于Webkit浏览器，您可以使用background-clip和text-fill-color，如下所示：

h1 { -webkit-background-clip：text; -webkit-text-fill-color：transparent; }

source

不幸的是，目前在使用纯CSS的其他浏览器中无法做到这一点。

Answer 2

渐变

background-color: #efefef;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#efefef),to(#ffffff));
    background-image: -webkit-linear-gradient(top,#efefef,#ffffff);
    background-image: -moz-linear-gradient(top,#efefef,#ffffff);
    background-image: -ms-linear-gradient(top,#efefef,#ffffff);
    background-image: -o-linear-gradient(top,#efefef,#ffffff);
    background-image: linear-gradient(top,#efefef,#ffffff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#efefef',EndColorStr='#ffffff');

Answer 3

只能在我看到的Webkit中工作，尽管它确实有效 - http://css-tricks.com/snippets/css/gradient-text/

Answer 4

我有解决方案，但它只对我有效。你来了。

p {

        background: linear-gradient(to bottom, #F00 0%,#630000 100%);
        background: -moz-linear-gradient(top, #F00 0%,#630000 100%);
        background: -webkit-gradient(linear, left top,left bottom, color-stop(0%,#F00 ), color-stop( 100%,#630000));
        background: -webkit-linear-gradient(top, #F00 0%,#630000 100%);
        background: -o-linear-gradient(top, #F00 0%,#630000 100%);
        background: -ms-gradient(to bottom, #F00 0%,#630000 100%);
        /*i.e */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F00', endColorstr='#630000', GradientType=0 );
        /* gradient targets only on letter and not on the background*/
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;*/

显然

0％表示渐变从顶部开始

100％表示渐变在字母末尾结束。

你也可以使用类似的东西

background: linear-gradient(to bottom, #F00 33%,#630000 100%);

如果您想将其应用于特定区域。

Answer 5

由于我想在所有浏览器中使用解决方案，我最终使用了jQuery插件。我使用了这个http://www.codefocus.ca/goodies/gradienttext

HTML：

<div id="example1">TODO write content</div>

JS：

 $(document).ready(function(){
        $('#example1').gradienttext({
            colors: [
                '#FF0000',
                '#FF6600',
                '#CCFF00',
                '#00FF00',
                '#0066FF',
                '#FF00FF'
            ],
            style: 'horizontal'
        });

});

并包括适当的js（jQuery和GradientText v0.1）

但是还有很多其他插件可供使用。你可以查看：

- http://jquery-plugins.net/tag/gradient
- http://mrnix.ru/pxgradient/index_en.html
- https://github.com/Se7enSky/jquery-text-gradient

P.S。谢谢你的答案，告诉我没有办法用纯粹的CSS来实现我想要的东西。

用css的渐变文本

5 个答案: