background常用属性及用法

background是css中最常见的样式，每个网页的设计都不可避免使用这个样式，今天我跟大家分享一下background常见的属性；

大致分为这几种：1.background-color: 设置背景颜色

                             2 .background-image: url(); 设置背景图片

                             3.background-repeat: ; 设置背景图片是否重复

                             4.background-size: ; 设置背景图片的尺寸

                             5.background-position: ;设置背景图片的位置

1.设置背景颜色：background-color

后面可以跟上：颜色的英语单词;  

                        16进制 rgb(a,b,c)或者rgba(a,b,c,d)，rgba的最后一个参数d代表透明度，用来设置背景颜色的透明度； 

                        hsl()或者hsla()和rgb用法相似； 

                        transparent，表示背景颜色是透明的，常用来透出父级的内容的；

2.设置背景图片：background-image

后面跟上：URL（）；括号里写上想要引入作为背景图片的图片路径，设置多背景图片的写法为：background-image: url("图片1"),url("图片2")； 多个属性中间由逗号隔开。

背景图片默认的显示方位都是从左往右，从上往下平铺的。

4.设置背景图片尺寸：background-size

后面可以跟上：可以设置像素(支持正负数)；

                         可以设置方向和百分比(left=0%,center=50%,right=100%)

设置背景图片的尺寸时最好只设置一个值（宽或高），使另一值自适应变化，如果同时设置两个值，背景图片可能会被拉伸，使图片失真。

background-size还有cover 和contain两个值；

1.当不设置background-size值时：默认从上到下，从左到右平铺图片，如下图：

one

2.当设置background-size：content; 时，以宽/高中最大值为标准平铺图片，使整个图片都包含其中，保持宽高比例。如下图：

two

3.当background-size：cover时,以宽/高中最小值为标准平铺图片，铺满整个元素，保持宽高比例。常用于：购物app,外卖app中宝贝图片的设置。如下图：

three

5.background-position: 设置背景图片的位置

后面可以跟上：像素或者百分比（两个值）； 如：background-position: 0 0；第一个值表示左右方向（x轴方向）的偏移量，第二个值表示上下（y轴方向）的偏移量。