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

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

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

CSS3中的背景属性

CSS3中有不少关于背景属性的变化。最明显的就是加入了多背景图片的支持,另外还有四个新属性,以及对已有属性的改动。
多背景图片

CSS3允许你为一个元素使用多于一张的背景图片。代码与CSS2中相同,你可以用逗号分隔开几张图片。第一个声明的图片会出现在元素顶部,就像这样:

  1. background-imageurl(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);  

新属性1: Background Clip

这个属性又让我们回到了开始的问题,关于border与background属性的问题。

background-clip 属性让你能控制在哪显示你的背景.可能的值有:

background-clip: border-box;

background 在 border 内显示,和现在的方式一样。.

background-clip: padding-box;

backgrounds 在 padding内显示,而非border,跟IE6的处理方式相同。

background-clip: content-box;

backgrounds 只显示在内容内, 而非border 或 padding。

background-clip: no-clip;

默认值,和border-box一样。

新属性2: Background Origin

这个属性需要和background-position属性一起使用。你可以改变background-position 的计算方式(就像 background-clip一样).

background-origin: border-box;

background-position 从border开始计算。

background-origin: padding-box;

background-position从padding开始计算。

background-origin: content-box;

background-position从内容开始计算。

想看background-clip和background-origin属性应用的例子请看CSS3.info.

新属性3: Background Size

background-size属性用来重定义你的背景图片大小。其可能值有:

background-size: contain;

缩小图片以符合元素大小。

background-size: cover;

扩展图片以符合元素大小。

background-size: 100px 100px;

重定义大小。

background-size: 50% 100%;

用百分比重定义。

你可以看看例子:CSS 3 specifications

新属性4: Background Break

CSS 3中, 元素能分拆成多个部分(例如inline元素span能占多个行)。background-break属性控制背景图像如何在多个部分展示。

可能值有:

Background-break: continuous;默认值

Background-break: bounding-box;: 将两部分之间的值加入考虑.。

Background-break: each-box;: 每个部分单独考虑。

Background Color属性的改变

CSS3中background-color属性支持前景色与底色:background-color: green / blue;

就这个例子,默认颜色是绿色,如果无法显示,则用蓝色。
Background Repeat属性的改变

还记得CSS 2中图片可能会因过界而部分消失吗? CSS 3 有两个新可能值来解决这一问题:

space: 设置重复图片的间距。

round: 重复图片自动调整大小以正好填充元素。

background-repeat: space的例子:CSS 3 specifications。

Background Attachment属性的改变

background-attachment有个新可能值: local.。它与可滚动的元素相关(比如拥有属性overflow: scroll;).。当background-attachment值为scroll时, 背景图片不会随内容滚动。现在

background-attachment:local,图片可以随内容一起滚动.

原文标题:前端设计师必知的background属性(有CSS3内容)

链接:http://www.cnblogs.com/biko-zc/archive/2009/09/09/1563545.html

(责任编辑:大宝库)


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