和img的区别

img元素是属于HTML的概念
背景图属于css的概念

  1. 当图片属于网页内容时，必须使用img元素
    2. 当图片仅用于美化页面时，必须使用背景图

涉及的css属性

  1. background-image:url（）

  2. background-repeat
    预设值：repeat、no-repeat
    默认情况下，背景图会在横坐标和纵坐标中进行重复

  3. background-size
    预设值：contain、cover，类似于object-fit
    数值或百分比

  4. background-position
    设置图片的位置
    预设值：left、bottom、right、top、center
    数值或百分比
    雪碧图（精灵图）（spirit）

  5. background-attachment
    通常用它控制背景图是否固定
    预设值：fixed

  6. 背景图和背景颜色混用

  7. 速写（简写）
    background：url（） no-repeat 50% 50%/100% fixed #000；
    写尺寸和位置的时候，先写位置再写尺寸