《
详解CSS背景Background属性》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234Y92013.htm
--> [
网站建设之]详解CSS背景Background属性
之前曾经简略先容过背景Background属性，咱们这里再具体讲授一下，教程中有相干例子，十分直观。
CSS2 中有5个重要的背景(background)属性，它们是：
background-color: 指定填充背景的颜色。
background-image: 援用图片作为背景。
background-position: 指定元素背景图片的地位。
background-repeat: 决定是否反复背景图片。
background-attachment: 决议背景图是否随页面转动。
这些属性可以全体合并为一个缩写属性: background。须要留神的一个要点是背景盘踞元素的所有内容区域，包括 padding 和 border，但是不包含元素的 margin。它在 firefox, Safari ,Opera 以及 IE8 中工作畸形，然而 IE6 和 IE7 中，background 没把 border 盘算在内。
Background does not extend to the borders in IE7 and IE6.
基础属性
背风景(background-color)
background-color 属性用纯色来填充背景。有很多方式指定这个色彩，以下方法都得到雷同的成果。
background-color: blue;
background-color: rgb(0,
详解CSS网页设计中字体大小(em)的问题, 0, 255);
background-color: #0000ff;
background-color 也可被设置为透明（transparent），这会使得其下的元素可见,
详解CSS网页布局中默认字体样式。
背景图(background-image)
background-image 属性容许指定一个图片展示在背景中。可以和 background-color 连用，因而假如图片不重复地话，图片笼罩不到地处所都会被背景色填充。代码很简单，只要要记住，门路是相对样式表的，因此以下的代码中，图片和款式表是 在统一个目录中的。
background-image: url(image.jpg);
但是如果图片在一个名为 images 的子目录中，就应当是：
background-image: url(images/image.jpg);
背景平铺(background-repeat)
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满全部元素。这兴许是你需要的，但是有时会盼望图片只呈现一次，或者只在一个方向平铺。以下为可能的设置值和结果：
background-repeat: repeat; /* 默认值，在水温和垂直方向平铺 */
background-repeat: no-repeat; /* 不平铺。图片只展现一次。 */
background-repeat: repeat-x; /* 程度方向平铺(沿 x 轴) */
background-repeat: repeat-y; /* 垂直方向平铺(沿 y 轴) */
background-repeat: inherit; /* 继续父元素的 background-repeat 属性*/
背景定位(background-position)
background-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 属性能够用其它数值，要害词跟百分比来指定，这比拟有用，尤其是在元素尺寸不是用像素设置时。
症结词是不必说明的。x 轴上：
* * left
* * center
,
详解CSS盒子模型; * * right
y 轴上:
* * top
,
详解CSS的背景属性的设置方法; * * center
* * bottom
顺序方面和应用像素值时的次序简直一样，首先是 x 轴，其次是 y 轴，像这样：
background-position: top right,
详解CSS优先级规则的级别与细节;
使用百分数时也相似。需要主要的是，使用百分数时，阅读器是以元素的百分比数值来设置图片的位置的。看例子就好懂得了。假设设定如下：
background-position: 100% 50%;
Tag： CSS 背景 background 属性 CSS 背景 background 属性
(责任编辑：网站建设)
详解CSS背景Background属性相关文章