前端基础CSS3之背景相关

背景相关

• 尺寸属性：

  background-size:100px 100px;<!--宽度100px，高度100px-->
  background-size:auto 100px;<!--宽度等比拉伸，高度100px-->
  background-size:cover;<!--等比拉伸，且宽高都要填满整个区域-->
  background-size:contain;<!--等比拉伸，且宽或高有一个填满整个区域为止-->

   

• 定位背景图片区域属性：

  background-origin:padding-box;<!--默认绘制区域，内边距区域-->
  background-origin:border-box;<!--绘制区域从边框区域开始-->
  background-origin:content-box;<!--绘制区域从内容区域开始-->

   

• 绘制背景（不包含背景图片）区域属性：

  background-origin:padding-box;<!--默认绘制区域，内边距区域-->
  background-origin:border-box;<!--绘制区域从边框区域开始-->
  background-origin:content-box;<!--绘制区域从内容区域开始-->

   

• 多重背景图片：

  background:url("1.jpj") no-repeat 0 0,url("2.jpj") no-repeat 10px 20px;
  /*先添加的图片会覆盖后添加的图片；多张图片时可以将不同属性拆开写，便于区分*/