css中backgroud的使用

一、backgroud使用

在css中background是用的非常多的，颜色和图片都是设计中非常必要的。在之前对于图片的设置都是一知半解，仔细研究一下才彻底搞明白。

二、属性值

1、backdroud-color

设置元素的背景颜色，可以直接设置颜色单词，如：red
可以设置hex值，如 ：#2A2828
可以设置rgb值：如rgb(224，224，224)
可以设置rgb值：如rgba(224，224，224, 0.7) – 最后一个值是透明度opacity，取值范围[0 , 1]，在canvas中取值为[0 , 255]；

2、backgraoud-image

设置元素的背景图片，属性值用url函数来获取图片的路径；如：

background-image: url(img/icon.png)；

3、backgroud-repeat（一般用于图片小于元素）

设置背景图片的重复方式，当背景图片的尺寸小于元素时，背景图片不能将整个元素填满，这时候默认会进行平铺，并且是水平与垂直方向同时平铺

属性值：

                1）repeat
                        默认值，会水平垂直方向同时平铺
                2）no-repeat    
                        不进行平铺，图片都大就会占多大的地方，没有图片的地方用底色填满
                3）repeat-x
                        沿着水平方向进行平铺
                4）reapeat-y
                        沿着垂直方向进行平铺
                5） inherit
                     规定应该从父元素继承 background-repeat

4、backgroud-size（一般用于图片大于元素）

设置图片在元素中的大小

属性值：

1） cover
不改变图片元素的原来比例大小，但是图片要铺满元素，就是把图片从小进行等比例放大，当宽高两个属性有一个与元素的宽高相等时，就用此时的大小进行铺满

2） contain
不改变图片的比例，让图片在元素中全部显示，就是将图片进行原比例，使图片最大化的显示出来。假设元素的宽大于高时，要将元素全部显示出来并且最大化，就是当元图片的宽度等于元素的宽度时。高度会出现空缺，此时用底色填充。

3）length
自己设置图片的大小

4）百分比
以父元素的百分比大小，如100%，100%，就是图片的宽高都等于元素的宽高，只设置一个值，另个一个为auto，这个百分比是父元素的百分比位置放图片，如：50%，就是元素的左半部分用来放图片。并且是整个图片都会显示出来，会被压缩

5、backgroud-position

设置图片在元素中的位置

属性值

1）left，top，right，bottom，center
将图片分割为九宫格，用上面属性来控制是哪一个，写一个默认center，当元素不够分为三层时，设置到最后一层没有效果

2）百分比
元素的百分比，设置为图片的左边距和上边距。

3）数值
直接设置左边距和上边距

6、background-attachment

设置元素是否随其他元素滚动而滚动

属性值

1）scorll
随其他元素滚动而滚动

2）fixed
不随其他元素滚动而滚动。

3）inherit
规定应该从父元素继承

7、background-clip

设置元素的绘制区域（针对于盒子模型）

属性值

1） border-box
背景绘制在边框方框内

2）padding-box
背景绘制在衬距方框内。

3）content-box
背景绘制在内容方框内

8、background-origin

设置元素的填充图片的绘制位置（针对于盒子模型）

属性值

1） border-box
图片绘制在边框方框内

2）padding-box
图片绘制在衬距方框内。

3）content-box
图片绘制在内容方框内

常用的就是前面几个，在设置图片的时候，repeat和position用的非常的多，这两个一般也都是大搭配着使用。后面的两个用的场景比较少。