CSS3 background相关属性的使用

css3包含了多种新的背景属性，可以实现对背景元素更加强大的控制

这里主要讲述了 background-size 和background-origin 两种属性的使用方法

使用这两个属性要注意的有以下两点，Firefox 3.6 以下不支持 background-origin 要加 -moz 前缀

safria 4以下不支持 这些新属性 需要加 -webkit- 前缀

下面看代码:

1.backgorund-size

html：

<div class="bg1">
	</div>
	<div class="bg2">
	css3 background相关属性的用法，实例
	</div>

css3：

body{color:#F00}
	div{
		width:200px;
		height:200px;
		border:1px solid #FF0;
	}
	.bg1{
		background:url(http://www.hexun.com/Images/10/32/103285.jpg);
		-moz-background-size:100px 80px;  /*为了兼容 Firefox 3.6 以下的浏览器 */
		background-size :100px 80px;
		background-repeat: no-repeat;
	}
	.bg2{
		background:url(http://www.hexun.com/Images/10/32/103285.jpg);
		-moz-background-size:100% 100%;  /*为了兼容 Firefox 3.6 以下的浏览器 */
		background-size :100% 100%;
		background-repeat: no-repeat;
	}

background-size 实例: http://www.jquerycn.cn/blog/demo/css3-background-size.html

2.background-origin

html:

<div class="bg1">
	CSS即层叠样式表（Cascading Stylesheet）。 在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
	</div>
	<div class="bg2">
	只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分或者页数不同的网页的外观和格式。
	</div>
	<div class="bg3">
	CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的
	</div>

css3:

body{color:#F00}
	div{
		width:200px;
		height:200px;
		border:10px solid #FF0;
		padding:10px;
	}
	.bg1{
		background:url(http://www.hexun.com/Images/10/32/103285.jpg);
		background-repeat: no-repeat;
		background-origin: content-box; /*一共三个值 border-box,padding-box,content-box*/
		-webkit-background-origin: content-box; /*为了兼容 safria4 以下*/
	}
	.bg2{
		background:url(http://www.hexun.com/Images/10/32/103285.jpg);
		background-repeat: no-repeat;
		background-origin: content-box; /*一共三个值 border-box,padding-box,content-box*/
		-webkit-background-origin: content-box; /*为了兼容 safria4 以下*/
	}
	.bg3{
		background:url(http://www.hexun.com/Images/10/32/103285.jpg);
		background-repeat: no-repeat;
		background-origin: border-box; /*一共三个值 border-box,padding-box,content-box*/
		-webkit-background-origin: border-box; /*为了兼容 safria4 以下*/
	}

background-origin 实例: http://www.jquerycn.cn/blog/demo/css3-background--origin.html

3.使用background-image 实现多背景图片

html：

<div class="bg1">
	CSS即层叠样式表（Cascading Stylesheet）。 在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
	</div>

css3:

body{
		color:#FFF;
		background-image:url(img_flwr.gif) ,url(getimage.jpg);
	}

多背景图片实例: http://www.jquerycn.cn/blog/demo/css3-background-multiple.html

转自：http://www.jquerycn.cn/blog/css3-background/