CSS样式之背景及雪碧图

背景样式

background-color

• 设置背景颜色，颜色值可以是十六进制值也可以是rgb(255,243,234)

background-image

• 作用：设置背景图片

• 可同时设置，背景颜色将会成为图片的背景色

• 若背景的图片小于元素，则背景图会自动在元素中平铺，将元素铺满

• 若背景的图片大于元素，则背景图片将会有一部分背景无法显示

• 一样大 ，则正常显示

background-repeat

• 作用：用来设置背景图片的重复样式

• 默认值：repeat 背景沿X轴、y轴双方向平铺

• repeat-x 沿x轴平铺

• repeat-y 沿y轴平铺

• no-repeat 图片不平铺

background-position

• 作用：用来设置背景图片的位置

• 设置方式：

  1. 通过top、left、right、bottom、center 几个方位词来设定

     用此方式设置时，必须同时指定两个值，如果只写一个，则另一个值默认为center

  2. 通过偏移量(像素值或百分比)指定背景图片的位置

     百分比以当前元素的父元素为基准

​ background-position：X 水平偏移量 Y垂直偏移量

background-clip

• 作用：设置背景范围

• 可选值：border-box 默认值，背景会出现在边框下边

​ padding-box背景不会出现在边框，只出现在内容区和内边距

​ content-box 背景只会出现在内容区

background-origin

• 作用：背景图片的偏移量的计算原点
• padding-box 默认值，background-position从内边距处开始计算
• content-box 背景图片的偏移量从内容区处计算
• border-box 背景图片的偏移量从边框处开始计算

background-size

• 作用：设置背景图片的大小
• 第一个值，表示宽度，第二个值，表示高度。如果只写一个，则第二个默认为auto
• cover 图片比例不变，将元素铺满,溢出部分不显示（隐藏）
• contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

background-attachment

• 作用：背景图片是否跟随元素移动
• 可选值：
  • scroll 默认值 背景图会跟随元素移动
  • fixed 背景会固定在页面中，不会随元素移动

background

• 背景相关的简写属性

  无顺序要求，也没有哪个属性是必须写的

​ 注：background-size 必须写在background-position的后边并使用 / 隔开

​ background-origin要写在background-clip 的前边

雪碧图

• 图片属于网页中的外部资源，都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用则不加载
• 解决图片闪烁的问题：
• 可以将多个小图片统一保存到一个大图中然后通过调整background-position 来显示，这样图片会同时加载到网页中，就可以有效避免出现闪烁的问题，应用十分广泛，被称为CSS-sprite,这种图我们称为雪碧图
• 雪碧图的使用步骤：
  1. 先确定要使用的图标
  2. 测量图标大小
  3. 根据测量结果创建一个元素
  4. 将雪碧图设置为元素的背景图片
  5. 设置一个偏移量以显示正确的图片