和img的区别
img元素是属于HTML的概念
背景图属于css的概念
- 当图片属于网页内容时,必须使用img元素
2. 当图片仅用于美化页面时,必须使用背景图
涉及的css属性
background-image:url()
background-repeat
预设值:repeat、no-repeat
默认情况下,背景图会在横坐标和纵坐标中进行重复background-size
预设值:contain、cover,类似于object-fit
数值或百分比background-position
设置图片的位置
预设值:left、bottom、right、top、center
数值或百分比
雪碧图(精灵图)(spirit)background-attachment
通常用它控制背景图是否固定
预设值:fixed背景图和背景颜色混用
速写(简写)
background:url() no-repeat 50% 50%/100% fixed #000;
写尺寸和位置的时候,先写位置再写尺寸