【上课笔记】css 中的background详解

今天学到了background 整理一下

css中的background一共有八种属性：

background-color：背景色
background-image：背景图片
background-size：背景图片尺寸
background-repeat：背景图片重复
background-position：背景图片位置
background-attachment：背景图片是否固定不动
background-clip：背景覆盖区
background-origin：背景图片覆盖区

常用属性有：

background-color: 颜色
background-image: 图
background-repeat: 是否重复
background-position: 背景图片位置
(这个可以调整一个大图片中想要他显示的一个小内容，后面的值可以是负值，还是有点东西的,后面介绍。)

1，background-color：

• 这个不用太过解释了吧，就是填充一下背景颜色
• 默认值是：background-color:transparent;也就是透明色
• 后面的属性可以写16进制的颜色：#EEEEEE,rgb或rgba颜色rgb（12,13,14）， rgba(12,12,12,1)其中第四个属性是透明度
• 还有一个可以做渐变色的方法，看到这里：https://www.runoob.com/css3/css3-gradients.html

2，background-image：

• 就是填充图片背景，建议最好在填充背景图片的同时也填充上背景颜色，防止图片没加载出来
• 用url写入背景图片的地址例如: background-image:url('01.jpg')
• 背景可以用多个图片，但是感觉没太有必要，例如：
  background-image: url("static/images/small1.png"),url("static/images/small2.png");
  显示结果就是：
  

3，background-size：

• 就是制定背景图片的大小
• 最基本的用法就是直接给定大小例如：background-size: 400px 200px;就是规定长为400px，宽为200px如图：（如果只给出一个值，那么第二个值记代表auto，当然也可以设置两个值为百分比）
  
• 当然用的最多的还是cover这个属性,可以保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小（也就是全屏显示，不多不少刚刚好）。
  
• contain这个属性我也弄不清是干啥的，用的也不是很多

4，background-repeat：

• 就是设置背景 图像是否重复，默认值是background-repeat：repeat 也就是重复
• no-repeat，定义图像不重复
  
• repeat-x 就是只重复水平方向
• repeat-y 就是只重复垂直方向

5，background-position：

• 最简单的用法：background-position：100px 200px
  
  简单明了，当然参数也可以是负值 这样就可以盖住不需要的部分，只漏出需要的部分
• 另外要是想限制居中或者靠边也可以直接写参数：
  
  例如：
  

6，background-attachment：

• 就是设置背景图片是否不动 默认是 scroll 也就是随页面滚动
• background-attachment：fixed 就是设置图片不动（感觉是冻结在页面上下左右滚动页面都不会动）

7，background-clip：

点击查看：菜鸟教程中对background-clip的解读

8，background-origin：

点击查看：菜鸟教程中对background-origin的解读

• 这两个感觉用的不多，给到链接看看就好

最后：background 是这些属性的合集：

// 甚至像这样写都是被允许的
 background: url("static/images/1.jpg") 400px 400px ,fixed,top center;