课程信息

    课程名称：前端工程师

    课程章节：第三周 背景与渐变

    课程讲师：

课程内容：

背景基础知识

Background-color属性

• Background-color属性 表示背景颜色

• 背景颜色可以用十六进制、rgb()、rgba()表示

• padding区域是有背景颜色的

Background-image属性

• Background-image属性 设置背景图片

• 图片路径写到url()中

  <!--可以是相对路径，也可以是http：//开头的绝对路径-->

   background-image:url(images/bg1.jpg)

  
  

• 如果样式表是外链的，那么要书写从css出发到图片的路径，而不是从html出发

   background-image:url(../images/bg1.jpg)

  
  

背景图片高级属性

background-repeat属性

• background-repeat属性 设置背景的重复模式

 例子：不平铺
 background-repeat:no-repeat;

• backgroung综合属性  

 background: white url(images/archer.png);

当插入的图片背景为透明时，使用白色进行填充可使背景变为白色

background-size属性

• background-size属性 设置背景图片的尺寸 (兼容到IE9,其他属性兼容到IE6)

 background-size:100px 200px;   宽度 高度

• 值也可以用百分数来设置，表示为盒子宽、高的百分之多少

• 需要等比例设置的值，写auto

• contain和cover:两个特殊的background-size的值

   background-size:contain;

  contain表示将背景图片智能改变尺寸容纳到盒子里（我要让用户看完整我的这张图片）

   background-size：cover;

  cover表示将背景图片智能改变尺寸以撑满盒子（不让盒子留白）

background-clip属性

• background-clip属性 设置元素的背景裁切到哪个盒子（兼容到IE9）

• 背景起源 :

   background-origin:content-box;

  以内容左上角开始渲染，以完整的内容出现在被裁减的内容区

background-attachment属性

• background-attachment属性 决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动

• 溢出的纵向内容，用滚动条显示:

   overflow-y: scroll;

  
  

background-position属性

• background-position属性 设置背景图片出现在盒子的什么位置

   backgroung-position:100px 200px; 水平方向 垂直方向

• 可以用top、bottom、center、left、right描述图片出现的位置

  如果仅规定了一个值，那么第二个值将是center

• css精灵：

  • 将多个小图标合并制作到一张图片上，使用backgroung-position属性单独显示其中一个，这样的技术叫做css精灵技术，也叫做css雪碧图

  • css精灵可以减少HTTP请求数，加快网页显示速度。

    缺点：不方便测量、后期改动麻烦

background综合属性

• 一些常用的背景相关小属性，可以合写到一条background属性中

 background:white url(images/archer.png) no-repeat center center;
           背景颜色     背景图片             背景重复     背景位置

• 一个盒子中设置多个背景图片，用逗号分隔：

  background:url(images/archer.png) no-repeat top center,    url(images/archer.png) no-repeat center center,    url(images/archer.png) no-repeat bottom center;

学习收获与心得：

    成功没有捷径，只有靠自己的努力和付出才能取得胜利

学习完毕截图：