背景与渐变

背景

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

上面是 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);

百分数代表圆心坐标