css中background属性介绍

css中background属性介绍

css中background属性用于定义元素的背景效果。可以设置如下属性

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

当然，在定义背景属性的时候，可以分开对单个属性进行赋值，通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

例如设置所有背景属性：

body
{ 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}


	 

	background-color 属性

	定义和用法

	background-color 属性设置元素的背景颜色。

	元素背景的范围

	background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

	可能的值
	
	

	

		

			

				值
			

				描述
		
		

			

				color_name
			

				规定颜色值为颜色名称的背景颜色（比如 red）。
		
		

			

				hex_number
			

				规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
		
		

			

				rgb_number
			

				规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
		
		

			

				transparent
			

				默认。背景颜色为透明。
		
		

			

				inherit
			

				规定应该从父元素继承 background-color 属性的设置。
		
	


	实例：

	background-color： blue;

	background-color： rgb（0， 0， 255）;

	background-color： #0000ff;

	background-color 也可被设置为透明（transparent），这会使得其下的元素可见。

	 

	background-image 属性

	定义和用法

	background-image 属性为元素设置背景图像。

	说明

	background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用，因此如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。

	元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

	默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

	可能的值

	 

	

		

			

				值
			

				描述
		
		

			

				url('URL')
			

				指向图像的路径。
		
		

			

				none
			

				默认值。不显示背景图像。
		
		

			

				inherit
			

				规定应该从父元素继承 background-image 属性的设置。
		
	


	实例

	body

	  {

	  background-image: url(bgimage.gif);

	  background-color: #000000;

	  }

	 

	background-position 属性

	定义和用法

	background-position 属性设置背景图像的起始位置。

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

	说明

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

	可能的值

	

		

			

				值
			

				描述
		
		

			

				

					

						top left
					

						top center
					

						top right
					

						center left
					

						center center
					

						center right
					

						bottom left
					

						bottom center
					

						bottom right
				
			
			

				

					如果您仅规定了一个关键词，那么第二个值将是"center"。
				

					默认值：0% 0%。
			
		
		

			

				x% y%
			

				

					第一个值是水平位置，第二个值是垂直位置。
				

					左上角是 0% 0%。右下角是 100% 100%。
				

					如果您仅规定了一个值，另一个值将是 50%。
			
		
		

			

				xpos ypos
			

				

					第一个值是水平位置，第二个值是垂直位置。
				

					左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
				

					如果您仅规定了一个值，另一个值将是50%。
				

					您可以混合使用 % 和 position 值。
			
		
	


	实例

	下面的例子中，设置了一个背景图片并且用 background-position 属性来控制它的位置，同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴（水平）位置，第二个是 y 轴（垂直） 位置。

	/* 例 1： 默认值 */

	background-position： 0 0; /* 元素的左上角 */

	/* 例 2： 把图片向右移动 */

	background-position： 75px 0;

	/* 例 3： 把图片向左移动 */

	background-position： -75px 0;

	/* 例 4： 把图片向下移动 */

	background-position： 0 100px;

	

	background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。

	还可以通过CSS关键字定义background-position 属性。通常会用x 轴、y轴来定义

	 

	x 轴上：

	* left

	* center

	* right

	 

	y 轴上：

	* top

	* center

	* bottom

	顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这样：

	background-position： top right;

	使用百分数时也类似。需要主要的是，使用百分数时，浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下：

	background-position： 100% 50%;

	使用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说，百分数定位是改变了背景图和元素的对齐基 点。不再像使用像素和关键词定位时，使用背景图和元素的左上角为对齐基点。例如上例的 background-position： 100% 50%; 就是将背景图片的 100%（right） 50%（center） 这个点，和元素的 100%（right） 50%（center） 这个点对齐。

	 

	background-repeat 属性

	定义和用法

	background-repeat 属性设置是否及如何重复背景图像。

	默认地，背景图像在水平和垂直方向上重复。

	详细说明

	background-repeat 属性定义了图像的平铺模式。

	从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。

	提示

	背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。

	可能的值

	

		

			

				值
			

				描述
		
		

			

				repeat
			

				默认。背景图像将在垂直方向和水平方向重复。
		
		

			

				repeat-x
			

				背景图像将在水平方向重复。
		
		

			

				repeat-y
			

				背景图像将在垂直方向重复。
		
		

			

				no-repeat
			

				背景图像将仅显示一次。
		
		

			

				inherit
			

				规定应该从父元素继承 background-repeat 属性的设置。
		
	


	 

	background-attachment 属性

	定义和用法

	background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

	可能的值

	

		

			

				值
			

				描述
		
		

			

				scroll
			

				默认值。背景图像会随着页面其余部分的滚动而移动。
		
		

			

				fixed
			

				当页面的其余部分滚动时，背景图像不会移动。
		
		

			

				inherit
			

				规定应该从父元素继承 background-attachment 属性的设置。
		
	


	说明

	为了正确地理解 background-attachment，首先需要明白页面（page）和视口（view port）是如何协作地。视口（view port）是浏览器显示网页的部分（就是去掉工具栏的浏览器）。视口（view port）的位置固定，不变动。

	当向下滚动网页时，视口（view port）是不动的，而页面的内容向上滚动。看起来貌似视口（view port）向页面下方滚动了。如果设置 background-attachment： scroll，就设置了当元素滚动时，元素背景也必需随着滚动。简而言之，背景是紧贴元素的。这是 background-attachment 默认值。

	 

	用一个例子来更清楚地描述下：

	background-image： url（test-image。jpg）;

	background-position： 0 0;

	background-repeat： no-repeat;

	background-attachment： scroll;

	

	当向下滚动页面时，背景向上滚动直至消失。

	但是当设置 background-attachment 为 fixed 时，当页面向下滚动时，背景要待在它原来的位置（相对于浏览器来说）。也就是不随元素滚动。

	 

	用另一个例子描述下：

	background-image： url（test-image.jpg）;

	background-position： 0 100%;

	background-repeat： no-repeat;

	background-attachment： fixed;

	

	页面已经向下滚动了，但是图像仍然保持可见。

	需要重视的一点是背景图只能出现在它父元素能达到的区域。即使图片是相对于视口（view port）定位地，如果它的父元素不可见，图片就会消失。

	 

	背景的简写属性

	 

	可以把背景的各个属性合为一行，而不用每次都单独把他们写出来。格式如下：

	background： 《color》 《image》 《position》 《attachment》 《repeat》

	例如，下面的声明

	background-color： transparent;

	background-image： url（image.jpg）;

	background-position： 50% 0 ;

	background-attachment： scroll;

	background-repeat： repeat-y;

	可以合为单独一行：

	background： transparent url（image.jpg） 50% 0 scroll repeat-y;

	而且不需要指定每一个值。如果省略值地话，就使用属性地默认值。例如，上面那行和下面这个效果一样：

	background： url（image.jpg） 50% 0 repeat-y;
标签：
css background