background属性详解

1. 定义和用法

background是一个简写属性，可以在一个声明中设置所有的背景属性，可设置的属性如下：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

这些属性在background中不必全部设置，比如：background：#0ff url(bg.jpg) no-repeat，官方对属性的顺序也没有强制要求，但是为了方便起见，个人建议按照
background-color，background-image，background-repeat，background-attachment，background-position，background-size，background-origin，background-clip的顺序进行声明。
　　另外值得一提的是，如果需要在同时声明background-position和background-size，由于其单位可能是相同的，所以要按照background-position/background-size的规则进行声明，比如：background:50px 50px/50px 50px，如果只需要声明一个，那么这个值是background-position。
　　同理，background-origin和background-clip的取值也是相同的，在同时设置两个的时候，顺序为background-origin background-clip，比如：background:padding-box content-box，声明一个时，这个值是background-clip。

2. background-color

说明：规定背景颜色
浏览器支持：所有浏览器（IE8及之前版本不支持inherit属性值）
语法：background-color：<color>
默认值：transparent
js语法：object.style.backgroundColor="#00FF00"
可能的值：
1.named_color：颜色名称，如red；
2.hex_number：十六进制颜色，如#fff000；
3.rgb()：rgb代码颜色，如rgb(0,255,255)；
4.rgba()：同3，可是设置透明度，取值0-1，如rgba(0,255,255,.5)；
5.hsl()：设置色调（0-360）、饱和度（0.0-100.0%）和亮度（0.0-100.0%）；
6.hsla()：同5，可以设置透明值，取值0-1；
7.transparent：透明，默认值；
8.inherit：规定应该从父元素继承 background-color 属性的设置。
9.currentColor：规定为color属性的颜色值

background-color设置的背景颜色会填充元素的内容区域，内边距区域（padding）和边框区域（border），如果边框有透明的部分，那么这些透明将会显示出背景色。比如下面

#bg{
        width: 10%;
        height: 100px;
        margin:0 auto;
        padding: 50px; 
        border:10px dashed #f00;
        background-color: #0ff;
    }

为这个块设置了50px的padding和10px的虚线边框，背景色填充了padding和边框的透明部分。

 

 

背景色的填充区域可以通过background-clip属性来控制，将在后文详细讲述。

 

3. background-position

说明：规定背景图像的定位位置，需要已经设置了背景图片
浏览器支持：所有浏览器
语法：background-position:<position> [<position>]，第二个值可选；第一个值规定水平位置，第二个值规定垂直位置
默认值：0% 0%
js语法：object.style.backgroundPosition="center"
可能的值：
1.关键词top、bottom、left、right、center：规定图像分别从顶部、底部、左边、右边和中间开始填充，如果只规定了第一个position，那么第二个值为center；
2.percentage：用百分比指定背景图像填充的位置，可以为负值。如果只规定了第一个值，那么第二个值为50%；
3.length：用长度值（可以是任何单位）指定背景图像填充的位置。可以为负值。如果只规定了第一个值，那么第二个值为50%。

在css3中，可以为background-position提供四个参数值。
如果提供四个，每个percentage或length值的前面必须提供关键词（即top、bottom、left、right、center）来指定相对偏移的方向，比如：

#bg{
        width: 500px;
        height: 300px;
        margin:0 auto;
        padding: 50px; 
        border:10px dashed rgba(255,0,0,.7);
        background: #0ff url('https://p3.music.126.net/ZjlPU7akZZYlscvnLS9NjA==/18668607929720106.jpg') no-repeat;
        background-size: 100px;
        background-position: right 50px bottom 50px;
    }

最后一行background-position:right 50px bottom 50px;的意思是相对右边界向左偏移50px，相对底边界向上偏移50px,其效果如下：

 

 

如果是用长度值来规定背景图片的位置，那么这个长度值的度量方式是图片的边缘线到指定偏移方向的距离，比如上图就是图片的右边缘到右边界（不包括边框）的距离。
如果使用百分比来规定图片背景的位置，那么这个百分比的度量方式不同于长度的度量方式。其度量方式为：相对于图片的百分比位置到边界的距离等于相对于这个块元素的百分比距离。嗯，是不是很难理解，举个栗子：将上面的代码最后一句改为background-position: 50% 50%;，效果如下

 

 

就是说相对于图片水平和垂直都是50%的位置（即图片的中心点），这个中心点到左边界和上边界的距离都是这个块的宽和高（不包括边框）的50%。

表达能力有限，更详细的解释可以参考《你真的了解background-position》这篇文章。

4. background-size

说明：规定背景图像的大小，需要已经设置了背景图片
浏览器支持：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
语法：background-position:length|percentage|cover|contain;，可设置两个值，第二个值可选；第一个值设置宽度，第二个值设置高度；
默认值：auto
js语法：object.style.backgroundSize="60px 80px"
可能的值：
1.length：设置背景图像的高度和宽度。可以是任何单位。如果只设置一个值，则第二个值会被设置为 "auto"；
2.percentage：以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值，则第二个值会被设置为 "auto"；
3.cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
4.contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

下图设置了background-size:cover的效果：图片覆盖了容器（包括容器的下边框），但是图片部分区域超出了容器而看不到。

 

 

这张是设置了background-size:contain的效果：容器包裹了整张图片，容器的部分区域可能是背景色。

 

 

用百分比设置大小，会根据容器的大小的百分比来设置图片的大小，比如background-size: 50% 50%;是下图的效果：图片的宽和高是容器的宽和高的50%，所有图片占了容器大小的四分之一。

 

 

5. background-repeat

说明：设置是否及如何重复背景图像。它会根据background-position的值来进行重复，而且需要已经设置背景图片；
浏览器支持：所有浏览器。
语法：background-position:<repeat-style> [<repeat-style>];，可设置两个值，第二个值可选；第一个用于横向，第二个用于纵向。；
默认值：repeat
js语法：object.style.backgroundRepeat="repeat-y"
可能的值：
1.repeat-x：背景图像在横向上平铺
2.repeat-y：背景图像在纵向上平铺
3.repeat：背景图像在横向和纵向平铺
4.no-repeat：背景图像不平铺
5.round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
6.space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
round和space两个属性值在浏览器的支持和表现情况不太一样，不做探讨。

6. background-origin

说明：规定 background-position 属性相对于什么位置来定位，需要已经设置背景图片；
浏览器支持：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 属性。
语法：background-origin: padding-box|border-box|content-box;；
默认值：padding-box
js语法：object.style.backgroundOrigin="content-box""
可能的值：
1.border-box：从border区域（含border）开始显示背景图像。
2.padding-box：从padding区域（含padding）开始显示背景图像。
3.content-box：从content区域开始显示背景图像。

在下图中，设置了以下属性

width: 300px;
height: 200px;
margin:0 auto;
padding: 50px; 
border:30px dashed rgba(255,0,0,.7);

 

 

其中border为30px，padding为50px，宽为300px，高为200px
border-box包括了border区域、padding区域和内容区域，因此，上图中它的宽为30*2+50*2+300=460px，高为30\2+50*2+200=360px，即border-box大小为460px*360px；
padding-box则包括了padding区域和内容区域，宽50*2+300px，高50*2+200px，为400px*300px；
content-box则只包含内容区域，为300px*200px；

当设置了background-origin: border-box;，背景从border-box开始显示图像，如下图：

 

 

 

background-origin: padding-box;背景从padding-box开始显示图像：

 

 

 

background-origin: content-box;背景从content-box开始显示图像：

 

 

 

7. background-clip

说明：指定对象的背景向外裁剪的区域；
浏览器支持：IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。
语法：background-origin: padding-box|border-box|content-box|text;
默认值：border-box
js语法：object.style.backgroundClip="content-box"
可能的值：
1.border-box：从border区域（不含border）开始向外裁剪背景。
2.padding-box：从padding区域（不含padding）开始向外裁剪背景。
3.content-box：从content区域开始向外裁剪背景。
4.text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

background-clip: border-box;效果：

 

 

background-clip: padding-box;效果：可以看出在边框部分的背景已经被裁剪掉了。

 

 

background-clip: content-box;效果：内容区域外的背景已经被裁剪掉了。

 

 

-webkit-background-clip: text;表示从文字开始向外裁剪背景，结合透明文字可以实现一些特殊效果

#bg{
        width: 300px;
        height: 200px;
        margin:0 auto;
        padding: 50px; 
        border:30px dashed rgba(255,0,0,.7);
        background: #0ff url('https://p3.music.126.net/ZjlPU7akZZYlscvnLS9NjA==/18668607929720106.jpg') no-repeat;
        background-size: cover;
        font-size: 50px;
        -webkit-text-fill-color:transparent;
        -webkit-background-clip: text;
    }

这里设置了文字的填充颜色为透明，并且由文字向外裁剪，就可以做出背景填充文字的效果。注意使用text属性值需要添加浏览器前缀获得支持。

 

 

8. background-attachment

说明：设置背景图像是否固定或者随着页面的其余部分滚动，需要已经设置了背景图像。
浏览器支持：所有浏览器（IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"）。
语法：background-attachment : fixed | scroll | local;
默认值：scroll
js语法：object.style.backgroundAttachment="fixed"
可能的值：
1.fixed：背景图像相对于窗体固定。
2.scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
3.local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

9. background-image

说明：设置背景图像。
浏览器支持：所有浏览器。
语法：background-image: url() | none | inherit;
默认值：none
js语法：object.style.backgroundImage="url(stars.gif)"
可能的值：
1.url()：指向图像的路径。
2.none：默认值。不显示背景图像。
3.inherit：规定应该从父元素继承 background-image 属性的设置。
如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。

作者：lightNate
链接：https://www.jianshu.com/p/7102ab9ae08c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。