CSS笔记（五） 盒子模型-----背景图片

一、背景

1.背景颜色           background-color：   ;

           关于背景颜色有一个值为 opacity

opacity属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明： 

 例1：

div {
  background-color: green;
  opacity: 0.3;
}

 例2：

div {
  background: rgba(0, 128, 0, 0.3) /
}

---

2.背景图片   background-image: ;

如果设置背景图片比盒子设置的宽度和高度小，那么背景图片就会在水平和垂直方向都重复平铺在盒子里

加多重背景兼容性不太好

（记得使用图片时，使用不会干扰文本的图像哦！）

p {
  background-image: url("01.gif");
}

---

3. 背景重复    background-repeat

默认是背景图片重复平铺在盒子里

repeat-x	水平方向重复
repeat-y	垂直方向重复
no-repeat	不重复，只显示一次

---

4.背景图片位置 background-position

background-position ：值1 值2；

值1是x轴坐标 值2是y轴坐标

单位：

background-position ：right   top；（默认）右上角	方位	等价于background-position ： 0   0；
background-position ：值1      值2；	像素	距离左侧，上侧多少像素
background-position ：50%     50%；	百分比	=background-position ：center   center；
如果只写了一个值，第二个值默认值center或者是50%

---

5.背景图片大小 background-size

css3新增元素，如果不兼容的话要加前缀

background-size：值1 值2；

值1代表背景图片的宽度，值2代表背景图片的高度

单位： 

background-size：50%  100%	百分比
background-size：400px   500px	数值（px）
.background-size：cover	把背景图等比例像扩展至最大尺寸，以使背景图像完全覆盖背景区域（可能会裁剪图片）
background-size：contain	把背景图等比例像扩展至最大尺寸，以使背景图片高度和宽度完全适应内容区域（可能会出现背景区域留白） 等价于background-size：100%
如果只设置了一个值，是宽度，那么高度会随着宽度的变化而变化

---

6.background-origin   定义背景图片的渲染位置

 border-box         边框盒子     背景图片从边框开始控制渲染

padding-box        背景图片从内边距开始控制渲染

content-box        背景图片从内容开始控制渲染

7.background-attachment      定义背景图片是否固定或者随着页面的其余部分滚动

background-attachment ：fixed   固定   图片固定在页面上，不随着内容的滚动而滚动  

background-attachment ：scroll   默认   背景图像随页面的其余部分一起滚动

7. 背景简写

提问！都有哪些属性值可以简写

在前面的博客里提到了font值，padding值，margin值 都可以简写，当然背景也可以啦

之前：

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

简写之后：

	background :  #ffffff   url("tree.png")   no-repeat  right top  /  500px      fixed  ;
	

如此一来是不是让代码看起来不那么冗长，简单明了 

    没有先后顺序，空格隔开
    位置在前，大小在后，  位置和大小之间用  /  隔开

1. background-color                                   背景颜色
2. background-image                                 背景图片
3. background-repeat                                 背景图片是否重复
4. background-position                               背景定位
5. background-size                                     背景大小
6. background-attachment                          背景图片是否滚动