css3入门(6)背景，css精灵

背景基础知识

背景颜色基础知识

• background-color属性表示背景颜色
• 可以使用十六进制，rgb（），rgba（）
• padding区域也有背景颜色

背景图片基础知识

• 使用background-image属性
• 图片路径要写到（）中，例如：
  background-image:url('paper.gif');
• 如果是外链式，要书写从css出发到图片路径，而不是html

背景图片高级属性

背景图片的重复模式

background-repeat属性

• 默认的时候全部平铺（值为repeat）
• repeat-x 第一行平铺

background-image:url('paper.gif');
background-repeat:repeat-x;

• repeat-y 第一列平铺

background-image:url('paper.gif');
background-repeat:repeat-y;

• no-no-repeat 不重复

background-image:url('paper.gif');
background-repeat:no-repeat;

背景尺寸

background-size属性

• 兼容到ie9
• 宽度在前，高度在后，可以用px，也可以用百分比
• 需要等比例写一个，另一个写auto

contain

• 智能改变尺寸让其容纳到盒子中
• 等比例的

cover

• 智能改变尺寸撑满盒子

背景裁切

background-clip属性

• 兼容到ie9
• border-box
  背景延申到边框
  
• padding-box
  背景延申到内边padding，不会绘制到边框处（dotted，dashed边框可察觉）
  
• content-box
  背景被裁剪至内容区域，padding区域没有背景
  

背景固定

background-attachment

• fixed
  自己滚动条不动，外部滚动条不动（背景始终不动）
• local
  自己滚动条动，外部滚动条动（都动）
• scroll
  自己滚动条不动，外部滚动条动（默认值，自己的不动，外部的动）

//在box里面加这些属性
overflow:scroll//上下左右可以滚动
overflow-x:scroll//左右可以滚动
overflow-y:scroll//上下可以滚动

背景图片位置

background-position属性

• 可以实现背景图片出现在盒子的什么位置

background-position：100px 200px；
//距离左边100px，顶部200px

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

center center表示居中
top center 顶部居中
left top 左上角

css精灵

• 将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个
• 可以减少http的请求数，不方便测量，后期改动麻烦
• 用切片工具选中图片，以下图为例

div{
  position:absolute;
  width:34px;
  height:32px;
  border:1px solid #000
  background-image:url(路径)
  background-position:-66px -488px;
}

background综合属性

• 一些常用的小属性可以写到一条里面
  

渐变背景

线性渐变

• 属于背景图片的管理范畴
• 盒子的background-image属性可以用linear-gradient（）形式创建线性渐变背景
  
• 渐变方向也可以写成度数
  把to right换成45deg即可
  
• 可以设置多个颜色值，用百分数定义他们出现的位置
  
  表示黄色会出现在x百分之80 的位置
  

浏览器私有前缀

径向渐变

• 盒子的background-image属性可以用linear-gradient（）形式创建径向渐变