css 关于背景background的各种

最近总是在无意接触关于背景图片的知识 ，刚好写下来当笔记用

• div的类名为img，为它加背景

.img{
background:url(./images/01.jpg) no-repeat;
}
/*可以在后面不断的叠加其他，也可以单独写，如下*/
.img{
background-image：url('./images/01.jpg')；
background-repeat：no-repeat；
}

1.图片重复 background-repeat

• 不重复 ：no-repeat；

• 向x或y方向重复 ： repeat-x或repeat-y；

• 重复： repeat（默认就是重复）；

• 继承父类，就是这个div外面的大div，如果没有父类就没有效果：inherit

2.图片尺寸 background-size

• 给2个值（第二个选项可以不给可以默认auto）：
  background-size：100% 100%；或者给像素大小 background-size：300px 300px；

• 图片覆盖整个div：
  图片会有变形 background-size：cover；

• 图片按比例去覆盖div：
  这个选项不会让图片按比例放大缩小，不一定能覆盖整个div：
  background-size：contain；

3.图片位置 background-position
div里要有留白，否则center看不到效果

• 指定2个方向 left center right 或top center bottom

• 指定1个方向，其他一个默认center background-position：center；

• 给2个值，像素或者百分比，意思是在你给的这个位置放图片（图片是在左上角开始） background-position：10px 10px；

• 可以继承， background-position：inherit；

4.背景里面的留白 background-origin（起源）

• padding-box
• border-box
• content-box

有三个值 ，背景图片填充到padding的位置或是外边距，内容的位置，不常用，简单写一下

5.背景图 background-image
（还有几个很难用到，没写，看菜鸟教程，就像是学文字哪能不看字典，唉）

• 给url，用得最多 background-image：url(’./images/01.jpg’)

• linear-gradient()，从上到下的渐变
  background-image: linear-gradient(black, red, blue);

• radial-gradient()，从里到外的径向渐变
  -background-image: radial-gradient(black, red, blue);

6.多个背景图的写法
一个背景放2张图片，写法如下

.img {
    background-image: url(01.jpg), url(02,jpg);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

7.背景图片作为外框
background-clip: 背景图片作为外边距，内边距，内容位置的背景

• border-box

• padding-box

• content-box