CSS-背景学习笔记

学习CSS的方法其实就是把每一个属性弄明白，作用：明确一个属性解决了什么问题、使用：最好写一些demo体会一下、注意事项：对不同浏览器的支持程度
1.background-color：背景颜色
2.background-image：背景图片

• background-image:url(图片的相对路径)

3.background-repeat：设置背景图片重复方式

• repeat：默认值，背景图片平铺显示，沿x轴y轴双方向重复
• no-repeat：背景图片不重复
• repeat-x：x轴方向重复 例子：渐变的导航条背景
• repeat-y：y轴方向重复

4.background-position：设置背景图片位置

• 方式一：通过位置的几个关键字来设置图片位置
  ** top、right、bottom、left、center
  ** 以上关键字两两组合可将背景图片设置到任意位置
  ** 如果只指定一个，另一个默认是center
• 方式二：直接指定两个值设置背景图片的偏移量
  ** background-position: x轴偏移量，y轴偏移量
  ** 偏移量指定正值分别向右向下便宜，指定负值则相反

5.background-attachment：设置背景是否随页面滚动

• scroll：默认值，背景图片会随滚动条滚动
• fixed：背景图片不随滚动条滚动，固定在指定位置，永远相对于窗口进行定位，一般这种背景会被设置给body

6.background：简写方式设置背景 background: 颜色 背景图片 图片位置 透明度 等

• 简写的属性没有顺序要求，没有数量要求，不写的属性采用默认值

7.opacity：设置背景的透明度

• 0表示完全透明，0.5半透明，1不透明
• IE8及以下版本的浏览器不支持改样式，可以使用滤镜来代替 filter: alpha(opacity=50), 100完全不透明