CSS常用背景属性

背景属性

背景色

    背景色
    属性名：background-color（bgc）
    属性值：颜色
    
    div {
     /* 盒子是 400 * 400 */
      width: 400px;
      height: 400px;

      /* 背景色为红色 */
      background-color: red;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

背景图

    背景色
    属性名：background-image（bgi）
    属性值：url(背景图 URL)
    
    div {
      width: 400px;
      height: 400px;

      /* 背景图默认是平铺（复制）的效果 */
      background-image: url();
    }
1
2
3
4
5
6
7
8
9
10
11
12

背景图平铺方式

    背景图平铺方式
    属性名：background-repeat(bgr)
    属性值    效果
    no-repeat 不平铺
    repeat    平铺（默认效果）
    repeat-x  水平方向平铺
    repeat-y  垂直方向平铺

    div {
      width: 400px;
      height: 400px;
      background-color: pink;

      background-image: url(./images/1.png);

      /* 不平铺：盒子的左上角显示一张背景图 */
      background-repeat: no-repeat;
      /* background-repeat: repeat; */
      /* background-repeat: repeat-x; */
      /* background-repeat: repeat-y; */
      
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

背景图位置

      属性名：background-position（bgp）
      属性值：水平方向位置 垂直方向位置
      关键字方式设置属性值-可以颠倒取值顺序
      关键字  位置
      left    左侧
      right   右侧
      center  居中
      top     顶部
      bottom  底部
      
      左上角
      background-position: 0 0;
      background-position: left top;
      
      右下角
      background-position: right bottom;

      水平：正数向右，负数向左
      background-position: 50px 0;
      background-position: -50px 0;

      垂直：正数向下，负数向上
      background-position: 0 100px;
      background-position: 0 -100px;

      特殊写法-关键字位置没有顺序区分
      background-position: bottom left;

      关键字可以只写一个，另一个方向居中
      background-position: bottom;

      只写一个数字表示水平方向，垂直方向居中
      background-position: 50px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

背景图缩放

      作用：设置背景图大小
      属性名：background-size（bgz）
      常用属性值：
      关键字
          cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
          contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
      百分比：根据盒子尺寸计算图片大小
      数字 + 单位（例如：px）

      cover：图片完全覆盖盒子，可能导致图片显示不全
      background-size: cover;
      contain：如果图的宽高跟盒子尺寸相等停止缩放，可能导致盒子有露白
      background-size: contain;

      100% 图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放
      background-size: 100%;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

背景图片固定

	  作用：背景不会随着元素的内容滚动。
      属性名：background-attachment（bga）
      属性值：fixed

      background-attachment: fixed;
1
2
3
4
5
6

背景图复合属性

	  属性名：background（bg）
      属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放  背景图固定（空格隔开各个属性值，不区分顺序)
      
      background: pink url() no-repeat center bottom/contain;
1
2
3
4
5