CSS3制作渐变文字

2022-10-08 13:56:17

CSS3制作渐变文字（-webkit-mask-image 与 -webkit-background-clip）

今天去css-tricks无意间发现了标题运用渐变文字这一效果，这使的想起了webkit内核浏览器的一些私有属性。而实现渐变文字这一特效可以借助webkit浏览器的两个私有属性-webkit-mask-image与-webkit-background-clip。

既然称之为webkit私用属性，我想大家都懂的，要用webkit内核浏览器才能看到效果。Chrome/Safari，这两个浏览器都可以的。

mask-image，从表层文字来看，mask为遮罩的意思，在这里就是给一个元素添加蒙板，配合渐变色来剪辑出你想要的渐变字体效果。而background-clip，这个也是类似的含义，不多做说明了。

在css-tricks里，通过以下代码发现，它的这种渐变效果运用的是后者，也更具多样化（这里下面会再做补充）。

CSS3制作渐变文字

这里是来自css-tricks的预览效果

标题文字（默认）：标题文字（鼠标经过）：

CSS3制作渐变文字

举个简单地例子来加以说明吧：

1、-webkit-mask-image

HTML：

<p class="wrd1">-webkit-mask-image</p>

CSS:

.wrd1 {

width:800px;

font:bold 3em Arial,Helvetica,sans-serif;

color:#800;

position:relative;

}

.wrd1:before {

content:‘Text-file-color 1‘;

color:#f00; /*设置字体色值*/

position:absolute;

left:1px;

z-index:2;

-webkit- mask-image:-webkit- gradient(linear,0 0,0 100%,from(rgba(255,0,0,1)),to(rgba(0,0,255,0))); /* 添加渐变蒙板*/

}

预览效果：

CSS3制作渐变文字

以上，添加注释的两个属性为关键属性。渐变蒙板的设置一般是从一个不透明色到透明色的渐变过渡（即opacity值的变化），这里不论你设置什么颜色都将以“不透明--半透明--透明”来显示。

或许你会觉得奇怪，为什么我在“.wrd1:before”里设置渐变蒙板，而不是直接在.wrd1中设置?其实这里的content:‘Text-file-color‘; ，是相当于把文字复制了一层出来。上面说了，渐变蒙板实现的是一种“透明-半透明-不透明”的文字效果，我们需要实色的文字，就把这两个文字重叠到一起，含有透明的放在上方就可以了……

要注意的是：渐变颜色值中必须有透明色值才能实现此效果。

2、-webkit-background-clip

HTML:

<p class="wrd2">-webkit-mask-image</p>

CSS:

.wrd2 {

width:800px;

font:bold 3em Arial,Helvetica,sans-serif;

color:transparent; /*将字体设置为透明色*/

background:-webkit-gradient(linear,0 0,0 100%,from(#f00),to(#800)); /*渐变背景*/

-webkit-background-clip:text; /*剪辑背景*/

}