CSS背景图

css背景图

涉及的css属性

1. background-image
2. background-repeat

• 默认情况下，背景图会在横坐标和纵坐标中进行重复

3. background-size

• contain 完整显示 同时比例不变
• cover 区域撑满 类似于object-fit
• 数值或者百分比 100%;横向百分百，纵向自适应。

4. background-position 设置背景图的位置。

• center：横向居中同时纵向居中。
• left bottom 横向靠左同时纵向靠下。
• 数值或者百分比：0px 0px;分别表示背景图的左边离盒子左边的距离，背景图的上边离盒子上边的距离

5. background-attachment：fixed

• 背景图是相对于视口

6. 背景图和背景颜色混用
7. 速写（简写）background

• background url(img) no-repeat position / size fixed