background-clip 背景剪切

决定背景显示区域,也就是剪切背景。
<box> = border-box | padding-box | content-box

语法:

{ background-clip : sBackgroundClip }

默认值: border-box
继承性:
DOM 语法: object.style.backgroundClip = sBackgroundClip
适用于: 所有元素
浏览器支持: Internet ExplorerFirefoxChromeOperaSafari

可能的值:

<box> [ , <box> ]*

<box> 的取值为:border-box | padding-box | content-box

描述
border-box 背景在边框盒内显示。
padding-box 背景在内边距盒内显示。
content-box 背景在内容盒内显示。

说明:

例子 1:

<style>
#cavas1
{
 width:600px;
 border:10px orange; 
 border-style:solid double;
 padding:20px;line-height:1.3em;
 background-image:url(http://dotnet.aspx.cc/Images/logoSite.gif),url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg),url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg);
 background-clip: border-box,padding-box,content-box;
 -webkit-background-clip: border-box,padding-box,content-box;
 background-repeat:no-repeat;
 background-position:0 0,0 100%,100% 100%;
}
</style>

<div id="cavas1">
外湖富商高赞的女儿高秋芳,聪明俊美,被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机,登门参试者甚多,但都不中意。宦门公子颜俊,不学无术,恃财仗势,选美寻欢。在庙会上,颜俊见秋芳貌美,欲以金钱取得她的欢心,虽遭碰壁,却不死心。于是,他指使其债户果子铺掌柜尤辰,前往高府骗婚。不料高赞择婿严谨,定要会文相婿。颜俊腹中无墨,又怕高家认出他是追赶高小姐的无耻之徒,便想出移花接木之计,假以会文为名,蒙骗其表弟钱青冒名顶替,到高府应试。相亲宴上,秋芳乔装改扮,亲赴席前送酒试才。高赞见钱青才貌出众,欣然允亲。吉日将临,高赞定要佳婿亲自迎娶。颜俊唯恐真情败露,再次请钱青帮助。钱青正为替他相亲之事悔恨不已,拒不替他迎亲。后来,颜母亲自出面,迫使钱青应允。钱青万般无奈,违心从命。迎亲之日,高府宾客满座,盛情款待,忽然,天气突变,风雪交加,湖水浪涌,无法行船,高赞恐误吉日良辰,执意在他家拜堂成亲。迎亲者自知不妥,但又不能言明,只得拜天地,入洞房。秋芳夙愿得偿,感到无比幸福,对钱青关怀备至。可是,钱青悔恨交加,不知所措。花烛之夜,一对新人,各怀心事,痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲,怒不可遏,硬拉钱青上公堂,告钱青骗婚占妻之罪。高赞得知真情,也拉尤辰到公堂论理。知县在夫人的协助下,审明案情,惩戒了颜俊,成全了钱青与秋芳的姻缘。
</div>
测试结果:Internet Explorer 9,Firefox 4,Opera 11,Safari 5(-webkit-前缀),Chrome 10 都支持该属性。
本属性最后更新时间:2011-05-03 09:28:15