背景图的用法

     background-size: 100% 100%;会按照容器比例撑满,会导致图片变形
     background-size: 100% 100%;
     
     background-size:cover; 把背景图片放大到合适元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会被裁掉
  /* 背景图 url 网络资源地址 后面写图片地址  要与变换后的一同使用*/   在下方设置图片时 用 em标签
 变换前:
  .cart em{
 background-image: url( 2.png);   
 }
 变换后:  
 .cart:hover em{
  background-image: url(1.png);
 }
  /* 背景图尺寸 */
 background-size: 100% 100%;
 vertical-align: middle;  (middle 中间) 将图片设置到中间位置
 /*背景图位置*/         
 background-position: center(中心) center(中心); (x,y)
 
   background-image: url();
  /* 背景平铺 */
  background-repeat: no-repeat;
  /* 居中 */
  background-position: center center;

  background-repeat:no-repeat ;   /*背景图平铺或不平铺 */

  background-position: center bottom; 背景图位置
   

 1. 背景属性 可以设置背景颜色 背景图 背景平铺 背景图像固定等等
    background-image 用来描述元素的背景图像 实际开发过程中常用于logo 或者小的一些装饰图像或者超大的背景图像
     /* background-repeat: ;属性设置是否及如何重复背景图像 */
    /* no-repeat 背景图像将仅显示一次 */
      沿x轴平铺图像
     background-repeat: repeat-x;
       沿y轴平铺图像
     background-repeat: repeat-y;

 2.background-position:x y; 利用背景图像属性可以改变图片在背景中的位置    x y 可以是数字(具体数值)也可以是方位名词
    background-position: top center; 只有一个方位名词时另一个则默认居中
    1.参数是方位名词 若指定两个都是方位名词那么前后顺序没有影响
    2.如果只指定一个方位名词另外一个省略,则省略的值为居中对齐
    3. 指定具体数值,严格按照x y的数值来定

 3. 背景图固定
    background-attachment: ; 设置背景图片是否固定或者随着页面的滚动而滚动  scroll为默认值 随内容的滚动而滚动  fixed 固定位置 不会随内容滚动而滚动
     background-attachment:fixed ;/*固定背景图*/

 4.背景图像复合写法 (简化代码,优化代码量)
    一般约定的顺序:(可以不按顺序)
    background: 背景颜色 背景图像的路径 背景是否平铺 背景是否滚动 背景图像位置;
    可以不按顺序写(浏览器功能强大依然能实现):
     background: red url(背景图.jpg) no-repeat top center fixed;