【css笔记：线性渐变】纯css实现黑白网格效果
已被阅读 1254 次 | 文章分类:css | 2022-03-04 00:42
css线性渐变函数linear-gradient的用法
1 概念
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片；他可以作为background的属性值；但并不是真正意义上的图片，但是可以作为背景图片去使用，可操作性更高
2 默认用法
linear-gradient()的参数依次是颜色，可以是两个或者多个，默认的渐变顺序是垂直从上往下;两个如下
<!doctype HTML>
<html>
<head>
<meta charset="utf-8"></meta>
<style>
.main{
width: 200px;
height:100px;
background: linear-gradient(red,green);
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
多个颜色
background: linear-gradient(red,green,orange,purple,yellow);
2 设置渐变方向
可以通过设置旋转角度设置渐变方向,旋转角度是第一个参数;如下我们先看一下角度式如何旋转的
0度是从下向上渐变，45度是从左下角向右上角渐变；90度是从左往右水平渐变；效果如下
0度
background: linear-gradient(0deg,red,green);
45度
90度
3 设置百分比
可以在颜色后面设置百分比，来决定渐变的区间;
background: linear-gradient(0deg,red 20%,green 70%);
上面这个意思就是；首先从下往上渐变；然后渐变区间是20%-70&；前20%是红色实色，后30%是绿色实色；
多颜色的渐变
background: linear-gradient(0deg,green,transparent,green);
5 制作黑白网格
(1) 在用线性渐变之前，再了解一个概念，背景可以设置多图片；直白点就是可以给一个div同时设置两个或者多个背景图，直接上代码
<!doctype HTML>
<html>
<head>
<meta charset="utf-8"></meta>
<style>
.main{
width: 200px;
height:100px;
background: url(./laba.png) ,url(./laba.png),url(./laba.png);
border: 1px solid;
background-repeat: no-repeat;
background-position: 0 0 ,40px 0px,60px 23px;
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
很直观我们按顺序设置了三个图片；然后都设置了不重复；然后按顺序设置了相对于左上角的偏移位置，便可实现上述效果
(2) 直入主题；我们用线性渐变实现两个45度的三角形
第一步，添加45度方向的渐变背景 为了便于观察我们设置了div的边框可见
.main{
width: 200px;
height:100px;
background: linear-gradient(
45deg
, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) );
}
第二步 设置背景大小为30px
.main{
width: 200px;
height:100px;
background: linear-gradient(
45deg
, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) );
background-size: 30px 30px;
border: 1px solid;
}
第三步 设置no-repeat
.main{
width: 200px;
height:100px;
background: linear-gradient(
45deg
, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) );
background-size: 30px 30px;
background-repeat: no-repeat;
border: 1px solid;
}
第四步 再添加一个一模一样的线性背景渐变，不过我们要偏移他的初始位置
.main{
width: 200px;
height:100px;
background: linear-gradient(
45deg
, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) ),linear-gradient(
45deg
, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) );
background-size: 30px 30px;
background-position: 0 0 ,15px 15px;
background-repeat: no-repeat;
border: 1px solid;
}
我们发现，如果适当平移一下就会有重合的部分，所以我们打开repeat属性，让他重复填充，惊奇的发现如下效果；黑色网格就用纯css实现了
.main{
width: 200px;
height:100px;
background: linear-gradient(
45deg
, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) ),linear-gradient(
45deg
, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) );
background-size: 30px 30px;
background-position: 0 0 ,15px 15px;
border: 1px solid;
}
