css知识点总结第三部分

css知识点总结第三部分

背景

• background-color 设置背景颜色

• background-image 设置背景图片
  - 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
  - 如果背景图片小于元素，则背景图片会自动在元素中平铺将元素铺满
  - 如果背景图片小于元素，将会一个部分背景无法完全显示
  - 如果背景图片和元素一样大，则会直接正常显示

• background-repeat 用来设置背景重复的方式
  可选值：
  -repeat 默认值，背景会沿着x轴 y 轴双方向重复
  -repeat-x 沿着x轴反向重复
  repeat-y 沿着y轴方向重复
  no - repeat 背景图片不重复

• background-position 用来设置背景图片的位置
  设置方式：
  通过top left right bottom center 几个表示方位的词来设置背景图片的位置
  使用方位词的时候必须要同时指定两个值，如股票致谢一个，则第二个默认就是center；

         通过偏移量来指定背景图片的位置
         水平方向的偏移量  垂直方向的偏移量
  

• background-clip设置背景的范围
  可选值：border-box默认值，背景会出现在边框的下边
  paddibg-box背景不会出现在边框，只出现在内容区和内边框
  content-box背景只会出现在内容区

• background-origin背景图片的偏移量计算的原点
  padding-box默认值， Background-position从内边距处开始计算
  Content -box背景图片的偏移量从内容区处计算
  Border- box.背景图片的变量从边框处开始计算

• Background-size设置背景图片的大小。第1个值表示宽度，第2个值表示高度。
  cover图片比例不变，元素铺满
  contain图片比例不变，图片在元素中显示完成。

• Background -attachment.设置图片。是否跟随元素移动。
  可选值：
  Scroll默认值背景图片会跟随元素移动。
  Fixed背景会固定在页面中，不会跟元素移动。

** Background背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置**
注意：
Background size必须写在background position后面，并且用/分开。
Background position/background size。
Background -Origin 和background- clip两个样式orgin要在clip前面。

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，
浏览器加载外部资源时是按需加载的，用则加载，不用则不加载像我们上边的练习link会首先加载，而hover和active会在指定状态触发时才会加载