【背景相关属性 +附加 （图片运用+改变鼠标指针样式）】

背景

背景颜色 (background-color)

如:

background-color:red;
background-color:#f1f1f1;

背景图片 (background-image)

如:

background-image:url(images/pic.jpg);

背景图片的平铺 (background-repeat )

有四个属性值:

• no-repeat 不平铺
• repeat 平铺
• repeat-x 横向平铺
• repeat-y 纵向平铺

常用值:

background-repeat:no-repeat;

附加

背景图特点:

• 想要背景显示看见, 所在的盒子必须有内容或者盒子有大小

• 背景图的可视范围由盒子大小来决定
  盒子大小>背景图大小的时候,能看见很多背景图
  盒子大小<背景图大小的时候,能看见部分背景图
  盒子大小=背景图大小的时候,能看见一张完整的背景图

• 默认情况下,背景图是平铺,可以设置平铺方式

   background-repeat:no-repeat; 常用值
   background-repeat:repeat;    默认值
  

• 当不平铺的背景图的位置在盒子的左上角,想要修改背景图的位置时,需要

     background-position: center(水平的)  center(垂直的) ;
  

背景图片的定位 (background-position)

有水平位置和垂直位置 ,可以给负值
属性值写法

• 单词:

  水平值(left,right,center)
  垂直值(top,bottom,center)
  例如;

   background-position:top left; 
   
   指的是水平靠左,垂直靠上,这里写水平值和垂直值的时候没有顺序,哪个在前都可以
  

• 数字+单位(px)

• 数字+%

背景图片的固定 ( background-attachment)

属性值:

• scroll 滚动
• fixed 固定
  (固定在浏览器窗口里面,固定之后就相对于浏览器窗口了)

背景图的大小 水平的宽度 垂直的高度 ( background-size)

属性值:

• cover
  实现全覆盖,背景图放置足够大,可以让背景图完全覆盖容器,但是一部分背景图不可见
• contain
• 对背景图等比例缩放,背景图盖不住容器,背景图全可见
• 数字+单位

background简写

• 简写如果不包括background-size ,那么顺序可以随便换背景的属性

• 简写如果包括了background-size那么,在简写的时候注意:
  1、必须写背景图的位置，且背景图的位置和背景的大小用/隔开 ,如: (left top/ 100px 100px)
  2、背景图位置和大小必须紧挨着写
  3、 其他参数可以在他们俩之前之后都可以

    例如:   
    background:red url(pic/bg.png) fixed no-repeat left top/ 100px 100px;  
  

图片运用

默认情况下,因为图片垂直相对于文本的基线对齐,而文本的基线和底线中间有距离,这个距离就是造成图片默认会向下撑大3像素的原因

    解决方法:
      1、设置图片垂直不想对于基线对齐，设置基于顶线，底线，中心都行，常用top， 
      例：vertical-align:top; 设置图片垂直对齐相对于文本的顶线对齐

      2、 把图片的本质转换为块元素
        img{ display:block;} 

改变鼠标指针样式

  cursor:pointer;
      修改鼠标指针的样式,指针变小手
  cursor:move;
      修改鼠标指针的样式,指针变移动指针

贴心小提醒

button这个标签按钮,默认解析就是怪异的解析模式,如果添加border和padding后，宽高不想计算也可以不用添加怪异盒子

         怪异盒子：
             当添加边框，内边框时，如果指定盒子宽度，在添加边框，内边距时，宽度会大于原来指定的盒子的
         宽度，在这种情况下，可以添加怪异盒子box-sizing：border-box； 使盒子成为怪异盒子；当然也可以
         对指定宽度减去相应的边框，内边框。