渐变H1-使我的H1字体文本为两种不同颜色的渐变-GradientH1-MakemyH1fonttextagradientoftwodifferentcolors

0  

Very possible, check out this JSFiddle from this stackoverflow post.Appears to only work in -webkit- though, so YMMV.

很可能,从这个stackoverflow post检查这个JSFiddle。虽然只是在-webkit-工作,所以YMMV。

h1 {
  font-size: 72px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.03, rgb(250,3,3)),
    color-stop(0.52, rgb(240,255,127)),
    color-stop(0.76, rgb(42,24,173))
);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

It makes use of the webkit-gradient CSS3 property.

它使用了webkit-gradient CSS3属性。

0  

You can leverage SVG and some CSS to achieve a Modern Browser compliant version of what you're going for. You'll need your gradient/background image, and some simple CSS on an SVG element and SVG text using the "Pattern" element as your url for the fill.

您可以利用SVG和一些CSS来实现符合您现代浏览器的版本。你需要你的渐变/背景图像,以及SVG元素和SVG文本上的一些简单CSS,使用“Pattern”元素作为填充的url。

Html Elements Below

下面的Html元素

CSS Below

svg {
    width: 6em; height: 1.5em;
    font: 900 500%/1.2 'Arial Black', sans-serif;
}

text { fill: url(#rainbow); }

→JS FIDDLE EXAMPLE HERE←

→JS FIDDLE例子在这里←