应用场景:
将图片当作背景
使用方法
background-image: url(“”) ;
相关常用属性
- background-repeat属性(背景平铺)
repeat 默认值,在水平方向和垂直方向都重复(默认值)
no-repeat 不重复背景图像
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直方向会重复背景图像 - background-size属性(设置背景图片大小)
width height进行设置 px或者百分比
auto
cover:保持图像的宽高比例,将图片缩放到正好完全覆盖定义的背景区域,其中有一边和背景相同
contain:保持图像的宽高比例,将图片缩放到宽或者高正好适应定义背景的区域,但背景仍在定义的区域之内,被包含。 - background-position属性(背景图片位置)
百分数(50%、50%代表中心位置)
像素值(10px、20px代表左上角向下10px,向右20px)
直接指定位置 (center、top、bottom、left、right)