background属性总结.pptVIP

background属性总结 背景属性—background是css中的核心属性。我们将详细讨论background的所有相关属性，包括background-attachment，这些属性既有CSS2中的，还介绍了它在即将到来的CSS3中的样子，还有那些新加入的背景属性。。掌握了这些background属性，对大家今后的开发工作十分有帮助。 CSS2中的背景属性（background） 回顾CSS2中有五个与背景相关的属性。 它们是： background-color: 完全填充背景的颜色 background-image: 用作背景的图片 background-position: 确定背景图片的位置 background-repeat: 确定背景图片是否重复铺平 background-attachment: 确定背景图片是否随页面滚动 这些属性能够写在一个简单的属性中：background。必须指出background负责元素内容部分的背景，包括padding和border，但不包括margin。在Firefox, Safari 和 Opera, 以及 IE8中是这样处理的。不过在IE7 和万恶的IE6中就没包括border，区别就像下面的图片示例显示的那样 。 上图可以看出在IE7 和 IE6中Background没有包括border。 下面逐一分析background相关的基本属性 1、Background color属性background-color用来描述设置填充背景的颜色。有多种方法来定义确定填充的颜色，下列方法都是等效的： background-color:?blue;?background-color:?rgb(0,?0,?255);?background-color:?#0000ff;?? background-color 也能设置成transparent，这样就能让其下的元素显示出来。  2、Background image属性background-image 让你可以使用自己的图片作为背景。它和background-color关系密切。一旦你的图片不足以平铺整个元素背景，空出的部分将显示background-color设置的颜色。它的使用极其简单，不过要记得图片与css文件的位置关系： background-image:?url(image.jpg);? 如果图片在文件夹内，就写成这样，均是用得相对路径: background-image:?url(images/image.jpg); 3、Background repeat属性默认情况下你的图片会水平和垂直重复直至铺满整个元素。 background-repeat:?repeat;?/*?默认值.?会在所有方向重复铺展图片?*/?background-repeat:?no-repeat;?/*?不重复。图片只出现一张?*/?background-repeat:?repeat-x;?/*?水平重复铺展?*/?background-repeat:?repeat-y;?/*?垂直重复铺展?*/?background-repeat:?inherit;?/*?使用父元素的background-repeat属性值.?*/? 4、Background position属性background-position属性控制着背景图片在元素中的位置。掌握的关键是background-position 是图片的左上角定位。 下面是background-position属性的演示。当然我们把background-repeat 属性设置为 no-repeat。  background-position:?0?0;?/*?默认，元素的左上角.?*/?background-position:?75px?0;/*?移向右边.?*/?background-position:?-75px?0;/*?移向左边.?*/?background-position:?0?100px;?/*?向下移动.?*/? background-position 属性也可以以关键字，百分比等单位工作，并非一定要精确使用像素（px）。关键字很常用，在水平方向有:left ，center ，right，垂直方向有:top ，center， bottom； 就像之前那样使用它们:background-position: top right; 百分比的使用方法也一样:background-position: 100% 50%; 5、Background attachment属