CSS 文字渐变的几种方式

Posted 2023-04-05

参考技术A css文件渐变虽然兼容性比较差，但是用在移动端和chrome中还是没有问题的。

实现文件渐变的方法有两种

效果如下

-webkit-background-clip W3C支持的属性说明

但是并没有text 属性，所以这个只能在chrome上看到效果，在其他浏览器没有实现，它的兼容性就有很大的问题了
-webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
缺点：webkit 内核浏览器特有

效果如下

使用：mask-image
缺点：webkit 内核浏览器特有

采用 svg 方式

实现原理：程序首先算出字体所在容器的高度N，然后清空容器内容，并添加N个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到，每个span的高度都为1。这样，我们就通过N各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。

HTML让文字在图片上显示的几种方法

第一种方式是image 作为背景图片，即：background:url(".......");

 

 

第二种方式是将img块与文字块（文字块采用span标签显示）放在同一个div 中，然后设置他们之间的位置，例如如下代码块：

 

1. <div style="position: relative; width: 170px; height: 89px;">

2. <img src="loading.gif" width="170" height="89" >

3. <span style="position: absolute; top: 0; left: 0;">添加文字...添加文字...添加文字...</span>

4. </div>

 

 

第三种方式是将img块与文字块（文本块存放在div中）放在同一个div 中，然后设置他们之间的位置，例如如下代码块：

 

1. <div style="position:relative;">

2. 　　<img src="loading.gif" />

3. 　　<div style="position:absolute; z-index:2; left:10px; top:10px">添加文字...添加文字...添加文字...</div>

4. </div>