目录
系列文章目录
前言
最近在学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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
