CSS 3新增属性详解(二)—>背景

发表于 2009年9月9日由 kily

上篇文章说到了CSS 3新增属性详解(一)—>边框，今天咱研究研究背景。

关于背景有四个属性：

background-origin —–>背景显示起始位置
background-clip ——–>背景裁剪起始方向
background-size ——->背景图片的大小
multiple backgrounds–>多重背景图象

1.background-origin —–>背景显示起始位置

兼容性：FireFox 3.0+ , Chrome 1.0+ , Safari 3.1+ , Opera 9.63+

效果如下图：点击查看原效果及代码(图1,2,3)

background-origin

background-origin

CSS代码：

-moz-background-origin:border;	/*从边框部分开始平铺背景图片*/
-webkit-background-origin:border;	/*也可以从padding,content部分开始*/

2.background-clip ——–>背景裁剪起始方向

兼容性：FireFox 3.0.10+ , Chrome 2.0+ , Safari 4+ , Opera 9.64+

效果如下图：点击查看原效果及代码(图4,5,6)

background-clip

background-clip

CSS代码：

 -moz-background-clip:content;	/*当背景图片小于div大小时*/
-webkit-background-clip:content;/*背景图片从内容部分被剪切*/

3.background-size ——->背景图片的大小

兼容性：Chrome 1.0+ , Safari 3.1+ , Opera 9.63+

效果如下图：点击查看原效果及代码(图7)

background-size

background-size

CSS代码：

 -webkit-background-size:100% 50%;	/*背景将拉伸至div宽的100%高的50%*

4.multiple backgrounds–>多重背景图象

兼容性：Chrome 1.0+ , Safari 3.1+

效果如下图：点击查看原效果及代码(图8)

multiple-backgrounds

multiple-backgrounds

CSS代码：

background-image:url(flower-02.jpg),url(flower-04.jpg);
	/*设置两个背景图片*/
background-position:left top,right bottom;
	/*设置背景图片的平铺位置*/
background-repeat:no-repeat,no-repeat;
	/*设置两个背景图片的平铺方式*/

《CSS 3新增属性详解(二)—>背景》上有 16 条评论

小渔在 2009年9月14日16:40 说：

这个特性蛮不错的，就是IE的支持是个问题。。
谢谢分享。。。。

回复 ↓
whisperer 在 2009年9月12日15:35 说：

kily的确很厉害

不知道IE什么时候才会支持~~

回复 ↓
- kily 在 2009年9月12日16:25 说：
  
  @whisperer 估计是候年马月了，CSS3差不多的所有属性都不被IE支持。真是汗啊。
  
  回复 ↓
0cai 在 2009年9月12日15:26 说：

新的css属性总是有浏览器兼容问题，麻烦啊，网页设计师确实要跟上步伐！

回复 ↓
- kily 在 2009年9月12日16:26 说：
  
  @0cai 说到咱心坎上啦。真是不好解决的问题，为了标准化必须得有一段痛苦的过程。
  
  回复 ↓
wuleilei 在 2009年9月12日08:24 说：

很强大，走在了技术的前沿~

回复 ↓
- kily 在 2009年9月12日08:30 说：
  
  @wuleilei 呵呵。很有前景哦。。哈哈。
  
  回复 ↓
闯天族在 2009年9月12日08:22 说：

css 高手!!!

厉害,你是网站衣裳的设计师!!呵呵!

回复 ↓
- kily 在 2009年9月12日08:29 说：
  
  @闯天族自己将就着写的主题，不要见笑哦^!^
  
  回复 ↓
  - 闯天族在 2009年9月12日08:34 说：
    
    很不错咯.我的主题还都是人家的呢! 佩服!~ O(∩_∩)O~
    
    回复 ↓
贵森主页在 2009年9月12日01:28 说：

css是很强大，本人正在学习中。。

回复 ↓
- kily 在 2009年9月12日01:48 说：
  
  @贵森主页呵呵。一下起学习哈。
  
  回复 ↓
安在 2009年9月11日12:41 说：

CSS3越发强大，只是有的涉及动画的就觉得有点多余了

回复 ↓
- kily 在 2009年9月11日13:23 说：
  
  @安我想的确是的，涉及动画的话会相当耗系统资源，而且页面渲染速度也会大大降低。
  
  回复 ↓
hiro 在 2009年9月10日01:52 说：

应该把css3的相关代码也贴出来啊！

回复 ↓
- kily 在 2009年9月10日05:34 说：
  
  @hiro 呵呵。昨天太晚了没来得及加，现在好了。都加上了^!^
  
  回复 ↓

发表评论取消回复