背景与渐变
大约 3 分钟约 945 字
背景
bgckground-color
- 表示背景颜色
- 可以用十六进制，rgb(),rgba()
- padding 区域是有背景颜色的
background-image
用来设置背景图片，图片路径要写到 ur1()圆括号中，可以是相对路径，也可以是 http://开头的绝对路径
background-repeat
用来设置背景的重复模式
- repeat:x，y 均平铺（默认）
- repeat-x:x 平铺
- repeat-y:y 平铺
- no-repeat:不平铺
background-size
- 属性用来设置背景图片的尺寸
background-size:100px 200px; 宽度 高度
- 值也可以用百分数来设置，表示为盒子宽、高的百分之多少
- 需要等比例设置的值，写 auto
contain 和 cover
contain 和 cover 是两个特殊的 background-size 的值
contain 表示将背景图片智能改变尺寸以容纳到盒子里
cover 表示将背景图片智能改变尺寸以撑满盒子
::: warning 注意
上面是 contain:很明显 cover 会裁剪图片
:::
background-origin 不常用
background-origin 属性规定 background-position 属性相对于什么位置来定位
如果背景图像的 background-attachment 属性为 " fixed "，则该属性没有效果
| padding-box(默认值) | 背景图像相对于内边距框来定位 |
|---|---|
| border-box | 背景图像相对于边框盒来定位 |
| content-box | 背景图像相对于内容框来定位 |
background-clip 不常用
用来设置元素的背景裁切到哪个盒子
- border-box:背景延伸至边框（默认值）
- padding-box:背景延伸至内边（ padding），不会绘制到边框处（仅在 dotted、 dashed 边框可察觉）
- content-box:背景被裁剪至内容区
background-attachment 不常用
决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
- fixed:自己滚动条不动，外部滚动条不动
- local:自己滚动条动，外部滚动条动
- scroll:自己滚动条不动，外部滚动条动（默认值）
background-position
- 可以设置背景图片出现在盒子的什么位置
background-position：100px 200px；
- 可以用 top、 bottom、 center、left、right 描述图片出现的位置
CSS 精灵
- CSS 精灵：将多个小图标合并制作到一张图片上，使用 background-position 属性单独显示其中一个，这样的技术叫做 CSS 精灵技术，也叫作 CSS 雪碧图
- CSS 精灵可以減少 HTTP 请求数，加快网页显示速度。缺点也很明显：不方便测量、后期改动麻烦
background 综合属性
background: [background-color] [background-image] [background-repeat]
[background-attachment] [background-position] / [ background-size]
[background-origin] [background-clip];
::: warning 注意
如果background-position 和 background-size 同时设置，需要在 background-size 前面加“/”，类似的简写语法在 font 和 border-radius 中也有
注意：如果简写形式中含有 background-size 属性，那么必须同时写上 background-position 属性，如果省略了就会导致样式失效
总结就是：size 和 position 属性在简写的情况下，要么都写，要么都不写。都写的时候 size 前面需要加/
渐变
线性渐变
- 盒子的 background-image 属性可以用 linear-gradient()形式创建线性渐变背景
background-image: linear-gradient(to right, blue, red);
to 渐变方向 开始颜色 结束颜色
渐变方向也可以写成度数 eg:45deg
可以有多个颜色值，并且可以用百分数定义它们出现的位置
background-image: linear-gradient(to right, blue, yellow 20%, red);
径向渐变
盒子的 background- image 属性可以用 radial- gradient()形式创建径向渐变背景
background-image: radial-gradient(50% 50%, blue, red);
百分数代表圆心坐标