文本背景裁剪与渐变效果
文本背景裁剪
background-clip: text;
-webkit-background-clip: text;
呈现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
/* 添加整体的背景颜色 */
background-color: #000;
}
div{
width: 1000px;
height: 400px;
margin: 0 auto;
text-align: center;
/* font：粗细 字体大小/行高 字体样式 */
font:bold 155px/400px "simhei";
border: 20px solid #ccc;
/* 必须添加背景图片，否则看不出来效果 */
/* 修改图片路径 */
background: url("./imgs/2.jpg");
color: rgba(255,0,0,0);
/* 裁剪：按照文字来进行裁剪 必须添加-webkit- 兼容问题 */
-webkit-background-clip: text;
background-clip: text;
}
</style>
</head>
<body>
<div>
hello world
</div>
</body>
</html>渐变
背景渐变（线性渐变）
background: linear-gradient
1、background: linear-gradient(red,green); 默认从上往下，由红到绿，表示到下面为绿色。
to 表示 向，望，到······
background: linear-gradient(to bottom,red,green); bottom是默认。
2、 可以进行方向上的设定如：to right , to left , to top。
background: linear-gradient(to right,red,green);
background: linear-gradient(to left,red,green);
background: linear-gradient(to top,red,green);
3、 可以在方位从 左上（到右下），左下（到右上），右上（到左下），右下（到左上） 等方向开始渐变。
background: linear-gradient(to left bottom,red,green); （到左下）
background: linear-gradient(to left top,red,green); （到左上）
background: linear-gradient(to right bottom,red,green); （到右下）
background: linear-gradient(to right top,red,green); （到右上）
4、除了可以使用 上下左右，右上，右下，左上，左下 等八个方位的英文单词表示，还可以使用度数 deg。
background: linear-gradient(90deg,red,green); 左红右绿
background: linear-gradient(-90deg,red,green); 左绿右红
background: linear-gradient(180deg,red,green); 上红下绿 （这个是默认的，就是去掉deg的）
background: linear-gradient(0deg,red,green); 上绿下红
注意：还可以使用 180deg--360deg 哦！
背景渐变（中心/发散/径向渐变）
background:radial-gradient
background: radial-gradient(100px 100px,red,green,white);
background: radial-gradient(50% 50%,red,yellow,blue);
颜色前面的数值 px、% 可以改变发散形状
background: radial-gradient(100px at 100px 100px,red,yellow,blue);
at 左边是半径 , at 右边是圆心位置
background: radial-gradient(50% 50% at 100px 100px,red,yellow,blue);
合二为一 ：发散形状 at 发散中心点
浙公网安备 33010602011771号