background image属性详解

应用场景:

将图片当作背景

使用方法

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)

你可能感兴趣的:(前端,javascript,开发语言)