软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 前端设计师必知的background属性

前端设计师必知的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,区别就像下面的图片示例显示的那样 。
基本属性
Background color属性
background-color用来描述设置填充背景的颜色。有多种方法来定义确定填充的颜色,下列方法都是等效的:

background-color: blue;
background-color: rgb(0, 0, 255);
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属性

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

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

Background position属性
background-position属性控制着背景图片在元素中的位置。掌握的关键是background-position 是图片的左上角定位。

相关阅读
网友评论
栏目导航
推荐软件