带有 CSS 的渐变文本答案

【问题标题】：Gradient text with css带有 CSS 的渐变文本
【发布时间】：2014-01-07 13:25:09
【问题描述】：

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

<p>TEXT</p>

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

我想要和你一样的结果 background: linear-gradient(#fbfbfb, #f2f2f2);

但仅适用于文本而不是整个背景。我正在寻找类似的东西：

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

【问题讨论】：

标签： javascript jquery css gradient

【解决方案1】：

对于 Webkit 浏览器，您可以像这样使用 background-clip 和 text-fill-color：

h1 { -webkit-background-clip：文本； -webkit-text-fill-color：透明； }

source

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

【讨论】：

【解决方案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');

【讨论】：

我想要的是文本而不是背景。您的代码使渐变成为背景

【解决方案3】：

据我所知，仅在 Webkit 中有效，尽管它确实有效 - http://css-tricks.com/snippets/css/gradient-text/

【讨论】：

【解决方案4】：

我有解决方案，但它只适用于我的 chrome。给你。

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%);

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

【讨论】：

【解决方案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

附：谢谢你的回答，让我知道没有办法用纯 css 实现我想要的。

【讨论】：