background

306 阅读1分钟

background-size

  • 像素 background-size:100px 100px ,把图片调整到100px 100px 宽高
  • 百分比:background-size:50% 50% ,把图片调整到50% 50% ,按照父元素的比例计算
  • cover::background-size:cover,按照图片的纵横比例扩大到铺满父元素的容器 ,如果图片大于父元素宽高,存在图片未完整显示,如果图片小于父元素的宽高,拉伸到铺满父元素,存在图片未完整显示,图片尺寸和父元素的尺寸相等,完整显示 (根据height缩放比例)
  • contain:background-size:contain 按照图片的纵横比例,缩小图片适应父元素的尺寸(根据width缩放比例)

background-position

  • 像素 100px 100px 图片水平方向向右100px 图片垂直方向向右100px
  • left center 使背景图片的基准点和元素的基准点对齐,X轴的左边,Y抽的中间对准
  • 50% 50% 使父元素的50% 50% 位置和背景图片的50% 50% 位置 对齐
  • 简写 background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

background-position :两个值 左右 上下