11-背景

背景

• background-color 背景颜色
• background-image 背景图片
• background-repeat 背景图片重复
• background-position 背景图片位置
• background-size 设置图片大小
• background-origin 设置图片偏移量的原点，与background-position一起用
• background-clip 背景显示的范围
• background-attachment 背景图片是否跟随元素移动

1. background-image 设置背景图片

• 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色

  

       background-image: url("./1.jpg");
  

2. background-repeat 设置背景的重复方式

可选值：

• repeat 默认值 ，背景沿着x轴与y轴双方重复

• repeat-x沿着x轴方向重复

• repeat-y 沿着y轴方向重复

• no-repeat 背景图片不重复

  background-repeat: no-repeat;
  

3. background-position 用来设置背景图片的位置

• 方位布局(top left right bottom center)
  只写一个值，第二个默认是center

  background-position:top right;  //右上
  
  background-position:top;  //第二个值默认center ，所以是中上
  

• 偏移量
  以坐上为定位进行偏移,第一个值是水平方向，第二个值垂直方向
  只写一个，默认垂直是中间

  	background-position:10px 10px; 
     background-position:100px;  //垂直默认是中间
  

4. background-clip 设置背景的范围

• border-box 默认值，整个盒子，包括边框
• padding-box 背景只在内容区和内边距
• content-box 背景只会出现在内容区

5. background-origin 背景图片的偏移量计算的原点

这个要结合background-position

• padding-box 默认值,原点从内边距开始计算
• content-box 原点从内容区开始计算
• border-box 原定从边框开始计算

 background-origin: border-box;
      background-position: 0px 0px;

6.background-size 设置背景图片的大小

• 参数设置（第一个宽度，第二个高度）
  只写一个，第二个默认auto

  background-size:100px 200px;
  

• cover 图片比例不变，元素铺满
  

• contain 图片比例不变，图片在元素中完整显示
  

7. background-attachment 背景图片是否跟随元素移动

• scrpll 默认值，背景图片会跟随元素移动
• fixed 背景图片固定在页面中，不会随元素移动