跨纯文本框中的浏览器文本渐变，而不使用背景图片 [英] Cross browser text gradient in pure css without using background image

问题描述

我已经尝试了很多文本渐变。我找到safari和chrome的代码，但它是不兼容的其他浏览器。我想让它工作，而不使用背景图像。如果你有任何正确的解决方案，请提供。

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.

推荐答案

我发现最好的方法是使用SVG渐变，容易做，不需要任何图像，下面是一些使用SVG创建简单的文本渐变的代码。

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 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>

您可以更改x和y值要创建一个水平/垂直或对角渐变，你也可以使用CSS样式表来应用样式，所有它需要在defs标签之间的一行额外的代码。

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.

  <link href="style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>

此方法适用于最新版本的Chrome，IE，Firefox和Safari。您也可以应用径向渐变，模糊和过滤器，了解详情请访问 W3学校。

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.

这篇关于跨纯文本框中的浏览器文本渐变，而不使用背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！