Question

如何使我的h1文本成为＃006768到＃2E0750的渐变。

我使用Wordpress。

我基本上想用代码实现以下功能：

http://www.reading-college.ac.uk/sites/default/files/gradient-example.jpg

无法将图片发布为缺乏足够的代表。

我的网站网址是：

http://79.170.44.112/activate-enterprise.co.uk/

我在线搜索但似乎无法找到合适的解决方案？

更新

这是我尝试过的代码：

h1.entry-title {
font-size: 72px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.03, rgb(44,7,85)),
color-stop(0.76, rgb(0,103,107))
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

然而，它仍然没有在我的主页上显示，而是回到＃2E0750

第二次更新

管理让它工作，因为我缩小了字体大小，我不得不相应地更改位置，因为你无法真正看到渐变。

Answer 1

很有可能，从this JSFiddle查看stackoverflow post.看来只能在-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;
}

它使用webkit-gradient CSS3属性。

Answer 2

您可以利用SVG和一些CSS来实现符合您现代浏览器的版本。您需要使用渐变/背景图像，SVG元素和SVG文本上的一些简单CSS使用＆＃34;模式＆＃34;元素作为填充的URL。

以下的Html元素

<svg>
<defs>
    <pattern id="rainbow" patternUnits="userSpaceOnUse" width="400" height="400" >
        <image xlink:href="http://img1.wikia.nocookie.net/__cb20130224165510/clubpenguin/images/9/9b/Rainbow_to_alpha_gradient.png" width="400" height="400" />
    </pattern>
</defs>
<text y="1.2em">SVG rocks!</text>
</svg>

CSS

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

text { fill: url(#rainbow); }

→JS FIDDLE EXAMPLE HERE←

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

2 个答案: