零碎知识
一、关于背景
1.背景的裁切
控制背景在盒子中的位置
选项 | 说明 |
---|---|
border-box | 包括边框 |
padding-box | 不含边框,包括内边距 |
content-box | 内容区域 |
background-clip: content-box;
/* 包住边框 */ background-clip: border-box; /* 在边框内部,不受padding和magin的影响 */ background-clip: padding-box; /* 在盒子的内容区域,受paddign和margin的影响 */ background-clip: content-box;
三者对比:
2.背景平铺
控制背景更在盒子中的分布
选项 | 说明 |
---|---|
repeat | 水平、垂直平铺(默认值) |
repeat-x | 水平平铺 |
repeat-y | 垂直平铺 |
no-repeat | 不平铺 |
space | 背景图片对称均匀分布 |
background-repeat: repeat-y
space类似于justify-content: space-between,将背景图片左右对称分布
3.背景滚动
选项 | 说明 |
---|---|
scroll | 背景滚动 |
fixed | 背景固定 |
background-attachment: fixed;
/* 随滚动条滚动而滚动 */ background-attachment: scroll; /* 固定不动 */ background-attachment: fixed;
4.背景尺寸
选项 | 说明 |
---|---|
cover | 背景完全覆盖,可能会有背景溢出 |
contain | 图片不溢出的放在容器中,可能会漏出部分区域 |
/* 背景图片会完全覆盖住盒子 */ /* 超出盒子部分自动溢出隐藏 */ /* 过程:宽高同时增大,直到图片的宽或高其中一个与盒子的宽或高相等,此时如果未铺满盒子,则继续增大,直至铺满 */ background-size: cover; /* 保证图片能完整不失真的显示,但是盒子内会留白 */ /* 过程:宽高同时增大,直到图片的宽或高其中一个与盒子的宽高相等,就不再增大 */ background-size: contain;
5.多个背景设置
一个盒子可以有多个背景,用逗号隔开即可。
background-image: url(./images/ke01.jpg), url(./images/01.jpg); background-repeat: no-repeat; background-size: 50% 50%, contain; background-position: center center, right top; /* 连写 */ /* 逗号隔开 */ background: url('./images/ke01.jpg') no-repeat center, url('./images/03.jpg') no-repeat right top; background-size: 50% 50%, contain;
6.背景渐变
6.1 线性渐变
/* 背景激变 */ background: linear-gradient(red, green); /* 可以改变变化方向 */ background: linear-gradient(to right top, red, green); /* 方向可以为度数 */ background: linear-gradient(360deg, red, green); /*可以设置多个颜色*/ background: linear-gradient(to left, red, yellow, blue, rgba(255, 255, 205, .5), #09f);
渐变方向
6.2 径向渐变
/* 以盒子的中心电向四周呈圆形渐变 */ background: radial-gradient(red, yellow, green); /* 设置径向渐变的宽高,前面的是宽,后面值是高,若只写一个值,默认宽高都是它 */ /* 即在这个范围内渐变,超过范围就以左最后一个颜色为背景色 */ background: radial-gradient(100px, red, yellow, green); /* 改变渐变方向,就是改变渐变的中心点 */ /* 在右下角渐变 */ background: radial-gradient(at right bottom, red, yellow, green); /* 也可以用百分比表示 */ /* 前一个值是宽的百分比,后一个值是高的百分比 */ background: radial-gradient(at 50% 80%, red, yellow, green);
6.3渐变标识位
颜色未指定标识时,颜色会平均分布。
/* 表示红色在宽度50%的时候开始发生渐变,直到60%不在渐变,后面的都是蓝色 */ background: linear-gradient(to right, red 50%, blue 60%); /* 当后面的值小于或等于前面的值,渐变效果不会产生 */ background: linear-gradient(to right, red 30%, blue 30%);
6.4渐变案例
黑8
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .ball { position: relative; width: 400px; height: 400px; border-radius: 200px; margin: 200px auto; background: radial-gradient(250px at 100px 100px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.85); } .eight { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 100px; background: radial-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); border-radius: 50px; } </style> </head> <body> <div class="ball"> <div class="eight">8</div> </div> </body> </html>
捏球球
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { position: relative; width: 400px; height: 400px; border-radius: 200px; margin: 200px auto; background: radial-gradient(250px at 100px 100px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.85); animation: boom 5s linear infinite; } @keyframes boom { 0% { transform: scale(1); } 20% { transform: scaleY(0.95) scaleX(1.05); } 50% { transform: scaleY(1.1) scaleX(0.9); } 70% { transform: scaleY(0.98) scaleX(1.02); } 80% { transform: scaleY(1.02) scaleX(0.98); } 100% { transform: scale(1); } } </style> </head> <body> <div></div> </body> </html>
来源:https://www.cnblogs.com/xiaoaitongxue/p/12653035.html