background url怎么填充_CSS background 属性

标签：

一、background属性可以设置一个元素的背景样式，当然前提是这个元素有具体的宽高值。

先来一个简单的背景设置：

1 #show-box{

2 width:800px;

3 height:500px;

4 background:#000;

5 background-image:url(image url);

6 }

7

这里只是简单的设置了颜色和背景贴图。

下面让我们来看一下官方的background的属性：

语法格式：

background: color position size repeat origin clip attachment image;

注意：如果同时设置了“position”和“size”两个属性，应该用左斜杠“/”，而不是用空格把两个参数值隔开：“position/size”。

1 background: url("img.jpg") center center/100% 100% no-repeat;

属性表(图片可能会显示得太小，请右键“在新标签中打开”以查看原图)：

1.color：背景颜色值。这个属性会把整个元素添加颜色，而且处于最底层(在有背景图片的情况下就可以看出)。

可选值：默认是透明，其他值可以通过查看“CSS颜色值表”来设置。

1

3 width:180px;

4 height:180px;

5 border:20px dashed #000;

6 background-color:#000000;

7 background-color:blue;

8 background-color:rgb(255, 255, 255);

9 background-color:rgba(255, 255, 255, 0.8);

10 }

11

2.position：背景图片的定位。如果没有图片设置，那么这个属性不起效果。

可选值：两个参数，水平位置和垂直位置。如果只有一个值，第二个值为“center”。

默认值是元素的左上顶角。可以使用位置关键字(top，right，bottom，left，center)。百分比(以元素大小为基值)。像素值。

1

3 width:180px;

4 height:180px;

5 border:20px dashed #000;

6 background-position:center;

7 background-position:center top;

8 background-position:0 100px;

9 background-position:10% 20%;

10 }

11

3.size：图片尺寸。应用于图片。

可选值：两个数值，如果只有一个值，第二个值为auto。

默认是图片自身大小。可以使用像素值，百分百(以元素大小为基值)。

cover：等比例缩放图片，覆盖这个元素。类似与windows中桌面背景的“填充”。

contain：等比例缩放图片，适应元素的宽或者高。类似于windows中桌面背景的“适应”。

4.repeat：平铺方式。

repeat：完全平铺，复制图片把整个元素填满。(默认)

repeat-x：水平平铺，在水平方向复制并平铺。

repeat-y：垂直平铺，在垂直方向复制并平铺。

no-repeat：不平铺，只使用一张图片。

5.origin：背景的参考区域。

可选值：border-box，padding-box，content-box。

6.clip：背景的可视区域。

可选值：border-box，padding-box，content-box。

对比一下不同值的效果图：

1.origin：border-box；clip：border-box；

1

3 width:180px;

4 height:180px;

5 margin:20px;

6 padding:20px;

7 border:20px dashed #000;

8 background:url("img.jpg") no-repeat border-box border-box;

9 }

10

2.origin：padding-box；clip：border-box；

1

3 width:180px;

4 height:180px;

5 margin:20px;

6 padding:20px;

7 border:20px dashed #000;

8 background:url("img.jpg") no-repeat padding-box border-box;

9 }

10

3.origin：content-box；clip：border-box；

1

3 width:180px;

4 height:180px;

5 margin:20px;

6 padding:20px;

7 border:20px dashed #000;

8 background:url("img.jpg") no-repeat content-box border-box;

9 }

10

4.origin：border-box；clip：content-box；

1

3 width:180px;

4 height:180px;

5 margin:20px;

6 padding:20px;

7 border:20px dashed #000;

8 background:url("img.jpg") no-repeat border-box content-box;

9 }

10

可以看出，origin设置的是位置，clip则会根据区域裁剪出背景图片。

7.attachment：设置背景图像是否固定或者随着页面的其余部分滚动。

默认值是scroll：背景图片随页面的其余部分滚动。fixed：背景图像是固定的。

8.多背景设置。

导入图片：background-image: url(image url);

二、多背景设置。

多背景的写法：使用逗号“，”隔开，继续写背景属性。

background: color position size repeat origin clip attachment image, color position size repeat origin clip attachment image;

也可以具体属性单独设置：background-image：url(image url 1)，url(image url 2)；

1

3 width:180px;

4 height:180px;

5 border:20px dashed #000;

6 background:url("img.jpg1") left top/100% 100% no-repeat,7 url("img.jpg2") left center/100% 100% no-repeat,8 url("img.jpg3") left bottom/100% 100% no-repeat,9 url("img.jpg4") center top/100% 100% no-repeat;

10 }

11

1

3 width:180px;

4 height:180px;

5 border:20px dashed #000;

6 background-image:url("img.jpg1"), url("img.jpg2"), url("img.jpg3"), url("img.jpg4");

7 background-position:left top, left center, left bottom, center top;

8 background-size:100%;

9 background-repeat:no-repeat;

10 }

11

标签：