background-repeat

236 阅读1分钟

background-repeat

定义背景图像的重复方式,只有图片宽高小于元素宽高时才会有意义,取值为:

  • repeqt (默认值)
  • repeat-x
  • repeat-y
  • no-repeat
  • round
  • space

repeat

repeatrepeat-xrepeat-y的结合体,即在x轴和y轴上都进行重复 8.png

repeat-x

只在x轴上重复 9.png

repeat-y

只在y轴上重复 10.png

no-repeat

设置no-repeat恢复正常,既不在x轴也不再y轴重复

12.png

round

注意观察左边的默认平铺方式,是不是感觉x轴和y轴好像显示了三个,但都是图片显示的都不是特别完整,round属性值的意思就是,如果超出的部分大于50%背景图片的widthheight就补齐,否则舍弃

  • 例1: 14.png
  • 例2: 7.png

space

space只放完整的图片,不完整的图片会被裁去,直到俩个图片之间的间隙够放下一个图片才会显示图片

  • 例1: 16.png
  • 例2: 4.png