css Backgroud-clip (文字颜色渐变)
程序员文章站
2022-06-04 11:18:12
首先来瞄一下background-clip,这个属性是干嘛的？ 顾名思义，背景裁剪... 按照我自己的理解就是背景的显示区域 此处粘上MDN的示例链接（嫌麻烦的，后面我也贴上截图）https://developer.mozilla.org/zh-CN/docs/Web/CSS/background- ......
首先来瞄一下background-clip,这个属性是干嘛的？
顾名思义，背景裁剪... 按照我自己的理解就是背景的显示区域
此处粘上mdn的示例链接（嫌麻烦的，后面我也贴上截图）https://developer.mozilla.org/zh-cn/docs/web/css/background-clip
background-clip共有4个属性值，默认是border-box
padding-box(背景显示区域不包括边框线)
content-box(背景显示区域只有内容)
最后一个属性值：text，也就是做文字渐变的重点了，这个效果类似于ps里的剪贴蒙版，效果图：
代码：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<link rel="stylesheet" href="./index.css">
</head>
<style>
.box{
display: inline-block;
font-size: 48px;
font-weight: bold;
background:linear-gradient(45deg,red,blue,yellow,green);
background-clip: text;
-webkit-background-clip: text;
color:transparent;
}
p{
margin:0;
}
</style>
<body>
<div class="box">
<p>落魄前端</p>
<p>在线炒粉</p>
</div>
</body>
那这个属性兼容性方面又怎么样呢？
目前ie浏览器不支持 text，其他浏览器则需要加上兼容前缀，但其他属性值大部分都支持了（真是个让人伤心的消息）
不过这个属性用来做文字的渐变确实很方便，还可以将背景图片剪贴到文字上
上一篇： 有一哥们追求我一年了
下一篇： 芭比娃娃的新用途