CSS中对图片(background)的一些设置心得总结

css2中关于background的属性有：

•  background-color: 指定填充背景的颜色，不引图片只需要一个纯色背景时用，这种情况下也可直接时用

background：#eee;

•  background-image: 引用图片作为背景,如 

  backgroud-image：url("img/bg.jpg");

•  background-position: 指定元素背景图片的位置,这个很多人都不习惯用，但还是蛮有用处的，实际中图片的左上角正对应元素的左上角，当你的打算使用像素来定位的时候，可以使用：

  background-position: 0 0;//第一个数字代表x轴水平位置，第二个数字代表y轴垂直位置
  background-position: 0 100px;

  当你的元素尺寸不适用像素设置的时候，还可以使用其他数值，如
  background-position: top right; // 图片的top对应元素的top 图片的right对应元素的right
  background-position:  100% 50%; //使用元素的百分比数值设置图片位置，道理同上

•  background-repeat: 决定是否重复背景图片，取值有以下几种：

   

   background-repeat: repeat;       //图片可重复
   background-repeat: no-repeat ; //图片不可重复
   background-repeat: repeat-x;    //图片在x轴上可以重复
   background-repeat: repeat-y;    //图片在y轴上可以重复
   background-repeat: inherit;       //遵从父元素的设置 

• background-attachment: 决定背景图是否随页面滚动,取值有：

  background-attachment: scroll; //默认值;表示背景紧贴元素
  background-attachment: fixed;  //背景不随元素滚动，当页面向下时，背景待在最初相对于浏览器的位置
  background-attachment: inherit;//遵循父元素的设定

　　当希望设置background的多个属性时，可以分别设置每一个，也可以合并为一行，写在一个属性里：background: transparent url(image.jpg) 50% 0 scroll repeat-y;

         css3中对于background添加了很多属性：

• background-color,设置图片的大小尺寸,取值有好几个：

    background-size: contain;     //缩小图片以适应元素的尺寸（图片宽高比不变）
    background-size: cover;       //扩展图片以填满元素（图片宽高比不变）
    background-size: 50% 100%;    //自定义调整图片大小 

   

• background-clip，背景修剪，可以很好的控制背景的显示位置：取值有：

   background-clip: border-box;   //背景显示在边框内
   background-clip: padding-box;  //背景显示在padding内(不是边框内)
   background-clip: content-box;  //只在内容内显示背景（不在padding中，也不在边框中）