当前位置:主页 > 网页教程 > 网页制作 > div css > 内容欢迎大家投稿

设计师必须了解的几个background属性

时间:2009-11-14 22:12来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

本文将介绍几个background属性,这些属性即有CSS2中的,也有部分是可能出现在未来的CSS3中。相信掌握了这些background属性,对大家今后的开发工作十分有帮助。

背景属性——background是css中的核心属性。你应该对它有充分的了解。这篇文章详细讨论了background的所有相关属性,甚至包括background-attachment,还为我们介绍了它在即将到来的CSS3中的样子,还有那些新加入的背景属性。

使用CSS2中的背景属性

回顾

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  
在IE7 和 IE6中Background没有包括border

基本属性

Background color属性

background-color用来描述设置填充背景的颜色。有多种方法来定义确定填充的颜色,下列方法都是等效的:

  1. background-colorblue;   
  2. background-colorrgb(00255);  
  3. background-color#0000ff

background-color 也能设置成transparent,这样就能让其下的元素显示出来。

Background image属性

background-image 让你可以使用自己的图片作为背景。它和background-color关系密切。一旦你的图片不足以平铺整个元素背景,空出的部分将显示background-color设置的颜色。它的使用极其简单,不过要记得图片与css文件的位置关系:

background-image: url(image.jpg);

如果图片在文件夹内,就写成这样,均是用得相对路径:

background-image: url(images/image.jpg);

Background repeat属性
默认情况下你的图片会水平和垂直重复直至铺满整个元素。但有时你可能只想向一个方向重复。那么就这么设置: 

  1. background-repeatrepeat/* 默认值. 会在所有方向重复铺展图片 */   
  2. background-repeatno-repeat/* 不重复。图片只出现一张 */ 
  3. background-repeatrepeat-x/* 水平重复铺展 */ 
  4. background-repeatrepeat-y/* 垂直重复铺展 */ 
  5. background-repeat: inherit; /* 使用父元素的background-repeat属性值. */ 

(责任编辑:大宝库)



------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接