1. 背景属性

  • background-color 设置背景颜色
  • background-image设置背景图片
    • 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满
    • 如果背景图片大小大于元素，则背景图片一部分会无法完全显示
    • 如果背景图片大小等于元素，则背景图片会直接正常显示
  • background-repeat设置背景图片的重复方式
    • repeat 默认值，背景图片沿着x轴和y轴双方向重复
    • repeat-x 背景图片沿着x轴方向重复
    • repeat-y 背景图片沿着y轴方向重复
    • no-repeat 背景图片不重复
  • background-position 设置背景图片的位置
    • 通过top left right bottom center几个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
    • 通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量
  • background-clip 设置背景的范围
    • border-box 默认值，背景会出现在边框的下边
    • padding-box 背景不会出现在边框，只出现在内容区和内边距
    • content-box 背景只会出现在内容区

  • background-origin 背景图片的偏移量计算的原点

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

  • background-size设置背景图片的大小

    • 第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是auto
    • cover 图片的比例不变，将元素铺满
    • contain 图片比例不变，将图片在元素中完整显示

  • background-attachment背景图片是否跟随元素移动

    • scroll 默认值，背景图片会跟随元素移动
    • fixed 背景会固定在页面中，不会随元素移动

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色

1.1 background-color属性

值 描述
color 指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent 指定背景颜色应该是透明的。这是默认
inherit 指定背景颜色，应该从父元素继承

1.2 background-image属性

值 说明
url(‘URL’) 图像的URL
none 无图像背景会显示。这是默认
linear-gradient() 创建一个线性渐变的 “图像”(从上到下)
radial-gradient() 用径向渐变创建 “图像”。 (center to edges)
repeating-linear-gradient() 创建重复的线性渐变 “图像”。
repeating-radial-gradient() 创建重复的径向渐变 “图像”
inherit 指定背景图像应该从父元素继承

1.3 background-repeat属性

值 说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repeat属性设置应该从父元素继承

1.4 background-position属性

值 描述
left top left center left bottom right top right center right bottom center top center center center bottom 如果仅指定一个关键字，其他值将会是”center”
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit 指定background-position属性设置应该从父元素继承

1.5 background-attachment属性

值 描述
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 设置该属性的默认值。
inherit 指定 background-attachment 的设置应该从父元素继承。

2. 雪碧图

雪碧图就是将很多很多的小图标放在一张图片上，就称之为雪碧图（CSS-Sprite）。如亚马逊的雪碧图：

亚马逊雪碧图

2.1 使用雪碧图的优点：

  • 将多张图片合并到一张图片中，可以减小图片的总大小
  • 将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗

2.2 雪碧图的使用步骤：

  1. 先确定要使用的图标
  2. 测量图标的大小
  3. 根据测量结果创建一个元素
  4. 将雪碧图设置为元素的背景图片
  5. 设置一个偏移量以显示正确的图片