蛋蛋28群  |  最近更新  |  tag  | 
手机版
蛋蛋28群
当前位置:首页 > css文字颜色渐变

css文字颜色渐变

来源:互联网 时间:2017-07-20 阅读: 手机版

篇一:css文字颜色渐变

这篇文章发布于 2011年04月20日,星期三,22:47,归类于 。

阅读 36910 次, 今日 55 次

by from

本文地址:

一、方法一:借助mask-image属性

可以狠狠地点击这里:

如果您手头上的浏览器是chrome或是safari,则您可以在demo页面中看到类似下面的效果:

方法一下的文字渐变效果 张鑫旭-鑫空间-鑫生活

相应的html代码如下:

h2 data-text="天赐美妞">天赐美妞 /h2>

与html相对应的css代码如下:

.text-gradient { display: inline-block; font-family: "微软雅黑"; font-size: 10em; position: relative; .text-gradient[data-text]::after { content: attr(data-text); color: green; position: absolute; left: 0; z-index: 2; -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));}

从css代码可以看出,效果的实现除了以外,主要是使用了mask-image属性,内容则是了。

二、方法二:background-clip + text-fill-color下的实现

您可以狠狠地点击这里:

如果您手头上的浏览器是chrome或是safari,则您可以在demo页面中看到类似下面的效果:

方法二下的文字渐变效果 张鑫旭-鑫空间-鑫生活

此处实现相对上面要简单些,html代码如下:

h2 >天赐美妞 /h2>

与html相对应的css代码如下:

.text-gradient { display: inline-block; color: green; font-size: 10em; font-family: "微软雅黑"; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1))); -webkit-background-clip: text; -webkit-text-fill-color: transparent;};

css代码中关键有用的其实就是最后三行:

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));-webkit-background-clip: text;-webkit-text-fill-color: transparent;

此方法虽然使用的css属性相对多些,但是结构简单,易于控制,颜色的选取与控制也更精确,理解上也更容易理解。我个人是推荐使用方法二的。

由于目前text-fill-color与mask-image属性貌似就webkit核心的浏览器支持,所以两个demo页面只能在chrome浏览器或是safari浏览器下才能看到渐变效果。firefox浏览器下纯色,ie下就更不用说了。

但是,文字渐变本身就是装饰性的功能,所以,本着渐进增强的原则,我们在实际项目中其实是可以大胆使用的。在不影响原来功能基础上,几行css代码,让占有率愈来愈高的chrome浏览器下有更好的视觉体验效果,何乐而不为呢?

就这些。感谢阅读。参考文章:

原创文章,转载请注明来自[]

本文地址:

(本篇完)

相关文章 (0.502) (0.281) (0.222) (0.222) (0.213) (0.190) (0.190) (0.150) (0.136) (0.135) (random - 0.010)

篇二:css文字颜色渐变

先来看看效果:

css3 文字渐变效果 - 独行冰海 - 独行冰海 使用到的知识点如下:对背景添加线性渐变:background:linear-gradient效果如下:css3 文字渐变效果 - 独行冰海 - 独行冰海 对文字进行透明处理:color:transparent(此时会显示出文字后面的背景颜色)此时效果如下: 最后仅仅针对文字应用渐变(注意,此特性"text"仅仅在webkit内核的浏览器中得到支持)-webkit-background-clip:text;此句代码作用是只有文字能够显示出渐变的背景,但是由于文字色是黑色,会将背景颜色覆盖掉,因此添加了color的transparent属性,令文字部分透明,从而达到欲达到的效果

整体代码如下:

!doctype html

html

head

meta charset="utf-8"

title 让文字颜色渐变 /title

meta name="keywords" content=""

meta name="description" content=""

style type="text/css"

p>

border:1px solid #000;

background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0f0 40%,#0ff 55%,#00f 70%,#f00);

-webkit-background-clip:text;/*只有webkit内核支持text的剪切模式*/

color:transparent;

}

/style

link href="" rel="stylesheet"/

/head

body

p>

/body

/html

同样也可以更改渐变模式为:radial,达到圆形渐变的效果css3 文字渐变效果 - 独行冰海 - 独行冰海 提示:请使用safari或谷歌浏览器查看效果

篇三:css文字颜色渐变

.text-gradient {

display: inline-block;

color: green;

font-size: 10em;

ont-family: 微软雅黑 ;

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

};

结语

由于目前text-fill-color属性貌似就webkit核心的浏览器支持,所以两个demo页面只能在chrome浏览器或是safari浏览器下才能看到渐变效果。firefox浏览器下纯色,ie下就更不用说了。

但是,文字渐变本身就是装饰性的功能,所以,本着渐进增强的原则,我们在实际项目中其实是可以大胆使用的。在不影响原来功能基础上,几行css代码,让占有率愈来愈高的chrome浏览器下有更好的视觉体验效果,何乐而不为呢?

猜你喜欢

最新文章

热门文章