CSS 纯css中的跨浏览器文本渐变而不使用背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8005447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross browser text gradient in pure css without using background image
提问by Hiten S
I have tried a lot for text gradient. I have found the code for safari and chrome but it is not compatible in other browsers. I want to make it work without using the background image. If u have any proper solution, kindly provide.
我为文本渐变尝试了很多。我找到了 safari 和 chrome 的代码，但它在其他浏览器中不兼容。我想让它在不使用背景图像的情况下工作。如果您有任何适当的解决方案，请提供。
回答by Harry12345
I found the best way to do this is to use SVG gradients, it's easy to do and doesn't require any images, below is some code that creates a simple text gradient using SVG.
我发现最好的方法是使用 SVG 渐变，它很容易做到并且不需要任何图像，下面是一些使用 SVG 创建简单文本渐变的代码。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" />
<stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" />
</linearGradient>
</defs>
<text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100">
SVG Text Gradient</text>
</svg>You can change the x and y values to create a horizontal/vertical or diagonal gradient, you can also apply styles to it using a CSS stylesheet, all it takes is an extra line of code between the defs tags.
您可以更改 x 和 y 值以创建水平/垂直或对角线渐变，您还可以使用 CSS 样式表对其应用样式，只需要在 defs 标签之间添加一行额外的代码即可。
<link href="style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
This method works in the latest versions of Chrome, IE, Firefox and Safari. You can also apply radial gradients, blurs and filters, for more information go to W3 Schools.
此方法适用于最新版本的 Chrome、IE、Firefox 和 Safari。您还可以应用径向渐变、模糊和过滤器，有关更多信息，请访问W3 学校。
回答by Jirka
<style type="text/css">
h1 {
font-family: "Myriad Pro", sans-serif;
font-size: 40px;
font-weight: normal;
}
/* --- start of magic ;-) --- */
.white-gradient {
position: relative;
}
.white-gradient:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
/* --- end of magic ;-) --- */
</style>
<h1 class="white-gradient">Pure CSS text gradient without any graphics</h1>回答by Jozsef Kerekes
You can do this with jQuery plugins.
您可以使用 jQuery 插件来做到这一点。
The Cufon plugin may have it too, you should check that out. It could also be done with the Raphael plugin or SVG and VML but a pure CSS cross-browser solution is hard to find.
Cufon 插件可能也有，你应该检查一下。也可以使用 Raphael 插件或 SVG 和 VML 来完成，但很难找到纯 CSS 跨浏览器解决方案。
Only for Chrome and Safari:
仅适用于 Chrome 和 Safari：
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
For the rest of the browsers you have to use some JavaScript.
对于其他浏览器，您必须使用一些 JavaScript。
