关于背景
零碎知识
一、关于背景
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>
文字渐变
<!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 {
/* 渐变 */
background: linear-gradient(90deg, #45CAFF, #1471FB, #09f);
/* 填充文字 */
/* 谷歌不兼容 */
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 20px;
width: 500px;
font-weight: 700;
}
</style>
</head>
<body>
<div>小艾同学渐变色哦好看吗啦啦啦</div>
</body>
</html>
