背景属性有以下这些

背景图

网页中使用背景图实现装饰性的图片效果

1
2
3
4
5
6

div {
    width: 500px;
    height: 300px;
    
    background-image: url(./img/00.jpg);
}

背景图平铺方式

background-repeat 有四个值

背景图位置

background-position 的值为 水平方向位置 垂直方向位置 其中位置的值有关键字和坐标

关键字有 left、right、center、top、bottom

坐标使用 数字+px，正负皆可

1
2
3
4
5

div {
    background-position: center top;
    /* 也可以数字和单词混用 */
    /* background-position: -50px center; */
}

可以只写一个关键字，另一个方向为居中；数字只写一个为水平方向，垂直居中

背景图缩放

background-size 常用三种属性值

• 关键字
  • cover：等比例缩放背景图片以完全覆盖背景区，可能图片部分看不见
  • contain：等比例缩放背景图片以完全装入背景区，可能部分空白
• 百分比：根据盒子尺寸计算图片大小
• 数字+单位 (如 px)

百分比为 100% 时图片宽度和盒子宽度一致，高度等比例缩放

背景图固定

background-attachment 使背景不会随着元素的内容滚动，属性值为 fixed

背景图复合属性

background 属性值为 背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定 不区分顺序

1
2
3
4
5
6

div {
    width: 500px;
    height: 500px;
    
    background: aqua url(./img/01.jpg) no-repeat center/cover;
}