目录
系列文章目录
前言
最近在学CSS,看到个比较好玩的东西——背景图,我们其实是可以通过CSS来画出一些好看的背景图案的
原理
linear-gradient翻译过来是线性渐变的意思
那这个东西怎么用呢?
我们可以:
- background: linear-gradient(to right,颜色[空格百分比可选],...)
to 后面的参数如果是right就是从左到右渐变,以此类推
然后是颜色,然后如果要控制颜色在哪个区域可以加个百分比,第一个颜色是0,最后一个颜色是100%
- background:linear-gradient(数字deg,颜色[空格百分比可选],...)
deg这种写法个人感觉可玩性更高,数字deg可以理解为角度,0deg是从下到上渐变,45deg是斜45°横推过去渐变,以此类推。如果觉得难以理解可以请出左手,手掌向上是0deg,手掌顺时针45°是45deg
示例
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.c1 {
height: 100px;
/*background: linear-gradient(45deg, red 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,red 100%),*/
/*linear-gradient(135deg,transparent 0,transparent 49.5%,black 49.5%,black 50.5%,transparent 50.5%,transparent 100%);*/
background: linear-gradient(45deg, transparent 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),
linear-gradient(135deg,transparent 0,transparent 49.5%,black 49.5%,black 50.5%,transparent 50.5%,transparent 100%);
background-size: 50px 50px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
图中一个框框就是50px*50px的大小,linear-gradient是可以叠加的,知道基本原理后我们试试怎么整小活
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.c1 {
height: 100px;
background: linear-gradient(45deg, red 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,red 100%),
linear-gradient(135deg,transparent 0,transparent 49.5%,black 49.5%,black 50.5%,transparent 50.5%,transparent 100%);
/*background: linear-gradient(45deg, transparent 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),*/
/* linear-gradient(135deg,transparent 0,transparent 49.5%,black 49.5%,black 50.5%,transparent 50.5%,transparent 100%);*/
background-size: 50px 50px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>