css background属性详解

发表于2014-05-07 09:14| 次阅读| 来源整理| 作者娜娃

摘要：css通过background属性设置元素的背景以展示不同的元素的样式。 1、background-repeat background-repeat 属性设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。所有浏览

css通过background属性设置元素的背景以展示不同的元素的样式。

1、background-repeat

background-repeat 属性设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。所有浏览器都支持 background-repeat 属性。

HTML代码：

CSS样式：

.main{width:500px; height:250px; border:1px solid #ccc; background-image:url(bg.png); background-repeat:?; }

2、background-position

background-position 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

Background-position:x y; (1)x、y值可以是left right top bottom center组合，组合方式有以下可能（top left，top center，top right，center left，center center，center right，bottom left，bottom center，bottom right），如果您仅规定了一个关键词，那么第二个值将是"center"；(2)可以是相对值%，第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%；(3)可以是数字，第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

总结：

a、x作用于横轴，y是竖轴

b、当取英文关键字时，left 相当于 x:0%，center为50%具体看它放在x还是y处。

注：无论left在x或者y的位置，它都会将x变成0%;

c、xy取数字，就是图片左上角与元素的左上角的位置偏移。取负数，则向上向左偏移。

d、xy取%，如10% 20%，图片的（10%*宽，20%*高）坐标对应元素的（10%*宽，20%*高）坐标，两个坐标重合就是图片的位置。如果取负数则是元素的左上角与图片（10%*宽，20%*高）坐标重合。

3、background-size（css3新增属性）

background-size 属性规定背景图像的尺寸。IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。可以对背景图片进行拉伸，不能为负值。

background-size的值类型：1个或2个值(1个为必填，1个为可选)，这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover, contain。如果你只设置一个值，当你使用firebug抓取到那个实例节点时，你会发现第二个值被自动加上了并且值为auto。当然，你也可以手动将第2个值设置为auto。background-size:100px;等价于background-size:100px auto;

其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto（cover和contain特定值除外）。

cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain: 保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域；