23

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

4

3 回答 3

34

我发现最好的方法是使用 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>

您可以更改 x 和 y 值以创建水平/垂直或对角渐变，也可以使用 CSS 样式表对其应用样式，只需要在 defs 标签之间增加一行代码。

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

此方法适用于最新版本的 Chrome、IE、Firefox 和 Safari。您还可以应用径向渐变、模糊和滤镜，有关更多信息，请访问W3 Schools。

于 2013-08-24T17:21:53.680 回答
26 

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

于 2012-03-23T08:36:52.650 回答
6

您可以使用 jQuery 插件来做到这一点。

Cufon 插件可能也有，你应该检查一下。也可以使用 Raphael 插件或 SVG 和 VML 来完成，但很难找到纯 CSS 跨浏览器解决方案。

仅适用于 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)));

对于其他浏览器，您必须使用一些 JavaScript。

于 2011-11-04T09:15:31.497 回答