CSS背景-background

• 复合属性—background

如果同时设置了background-color和background-image时，背景颜色会被图片覆盖。

background-image: 用作背景的图片，background:url( )；

如果将背景设置为图片，那么我们就要考虑以下几个属性了。

background-repeat:

repeat-x:横向平铺

 

repeat-y:纵向平铺

 

round：背景图像自动缩放直到适应且填充满整个容器。

 

space：背景图像以相同的间距平铺且填充满整个容器或某个方向。

 

repeat：背景图像在横向和纵向平铺，默认值。

 

no-repeat:不平铺

 

background-size:

具有两个参数，值既可以是px也可以是%或者是auto（默认）。若只有一个参数，则为宽度，高度等比例缩放，如果背景图片的尺寸超过容器，将会被裁切。若有两个参数，则为宽高。

cover：背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器，不过超出的部分将会被裁切。

 

contain:此属性值可以将背景图片等比例放大或者缩小。contain只要求某一个方位上将容器覆盖，比如纵向或者横向能够最小程度将容器覆盖。

 

background-position:确定背景图片的位置

background-position : length || position

length:<percentage> | <length>

position：left center|left top| ……

1、background-position:0 0；
背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。该属性定位不受元素的 padding影响，例如，我们给容器元素增加padding值，只是影响了容器元素的高度和宽度，背景图片的左上角还是与容器元素的左上角对齐。

 

2、background-position:-10px -20px;

图片以容器左上角为参考向左偏移10px，向上偏移 20px，

 

3、background-position:50% 50%;

图片水平和垂直居中。与 background-position:center center;效果等同。

等同于x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

x=(300-178)*50%=61px y=(300-108)*50%=96px

 

4、background-position:100% 100%;

图片处于容器元素的右下角，与 background-position:right bottom;效果等同。

 

background-attachment：定义用户滚动页面时背景图片会发生什么。

scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。

 

但是有一种情况例外：对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。

 

fixed：背景图相对于视口固定，就算元素有了滚动条，背景图也不随内容移动，好像背景图片被钉到了视窗上一样。

 

local：背景图相对于元素内容固定。

背景图片会随着页面其余部分的滚动而移动。但如果内容是可以滚动的元素（设置为overflow:scroll的元素），背景图会随元素内容的滚动而滚动，因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。

 

这就是关于background这个复合属性的一些基本知识啦~