6.css背景

三.c s s的背景

1. css设置背景颜色:

• 使用关键字backgrounf-color:

  div {
              background-color: transparent;/*transparent 透明的 是默认的属性*/
          }
  

2.css设置背景图片:

• 使用background-image:

  div {
      background-image: url(图片的位置);
      background-image: none;  /*无图片默认的 */
  }
  

3. 设置背景图片平铺:

• 使用background-repeat:

  div {
  background-repeat: no-repeat; /*设置背景图片不要平铺,默认的情况下是平铺的*/
  }
  
  div {
  background-repeat: repeat-x; /*设置背景图片按照x轴平铺*/
  }
  
  div {
  background-repeat: repeat-y; /*设置背景图片按照y轴平铺*/
  }
  

  注意:页面元素既可以添加背景颜色也可以添加背景图片 :只不过背景图片会压住背景颜色

4.设置背景图片的位置:

• 使用background-position:

  div {
      background-position: x  y;  /*参数代表的意思是：x 坐标和 y 坐标,水平向右为正,垂直向下为正。 可以使用 方位名词 或者 精确单位*/
  }
  

参数是方位名词:

1. 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
2. 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
3. 参数是精确单位:
   • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
   • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
4. 参数是混合单位:
   • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

5.背景图像固定(背景附着):

• background-attachment 属性设置背景图像是否固定或者是否随着页面其余部分滚动.

  background-attachment: scroll; /*默认的 背景图像会随着类容的滚动而滚动*/
  
  background-attachment: fixed; /*背景图像固定*/
  

6.背景复合写法:

• 使用background 可以节省代码量,background没有顺序要求,一般来说可以按照,background: 背景颜色 背景图片的地址 背景平铺 背景图像滚动 背景图片位置

  background: black url(../img/01.jpj) no-repeat fixed  center top color:#FFF;
             /*背景颜色 背景图片的地址 背景平铺 背景图像滚动 背景图片位置*/
  

7. 背景颜色半透明:

• 通过 background: 来实现背景颜色半透明:

  background: rgba(0,0,0,0.3)  /*rgba(红,绿,蓝,透明度) a是alpha的简写*/
  

注意：

1. 最后一个参数是 alpha 透明度，取值范围在 0~1之间
2. 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
3. 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
4. CSS3 新增属性，是 IE9+ 版本浏览器才支持的
5. 但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

总结: