孙肖宁

CSS3中的背景问题
背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。backgrou...
扫描右侧二维码阅读全文
05
2018/06

CSS3中的背景问题

背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

  • background-size:width,height 可以设置背景图片的宽度以及高度

    • background-size设置背景图片的尺寸
      background-size: 100% auto; 自动是适应盒子的宽度,当宽度发送改变时,高度会有内容溢出。
      常规用法:通过百分百,和像素来调整背景的尺寸.
    • cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。整个背景图片完整显示在背景区域.
    • contain会自动调整缩放比例,保证图片始终完整显示在背景区域。也可以使用长度单位或百分比
  • background-origin(原点,起点)设置背景定位的原点

    • 所谓的背景原点就是调整背景位置的一个参照点.调整背景图片定位的参照原点.
    • border-box以边框做为参考原点;
    • padding-box以内边距做为参考原点;
    • content-box以内容区做为参考点;
  • background-clip设置背景区域clip(裁切)

    • border-box裁切边框以内为背景区域;
    • padding-box裁切内边距以内为背景区域;
    • content-box裁切内容区做为背景区域;
  • 以逗号分隔可以设置多背景,可用于自适应局
    背景图片尺寸在实际开发中应用十分广泛。
Last modification:June 5th, 2018 at 09:37 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment