css3背景

标签：

背景属性

　　background-color（背景颜色）

　　background-image（背景图片）

　　background-repeat（背景展示方式）

　　background-attachment（背景图片是固定还是滚动）

　　background-position（背景图片位置）

css3新增属性

　　background-origin：指定背景图片绘制背景起点

　　background-clip：指定背景图片的显示范围

　　background-size：背景图片的尺寸大小

　　background-break：指定内联元素的背景图片进行平铺时的循环方式。

一、background-origin

　　语法：background-origin：padding-box || border-box || content-box

　　解析：

• padding-box：默认值，决定background-position起始位置从padding外边缘（border内边缘）开始显示背景图片
• border-box：border的外边缘开始显示背景图片
• content-box：从content的外边缘显示背景图片

　　浏览器兼容性：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 属性。

　　实例：

div{
    width: 300px; 
    height: 300px; 
    border: 10px solid red;
    padding:50px; 
    background:url(‘/i/bg.png‘) no-repeat;
    background-origin:border-box;
}

div{
    width: 300px; 
    height: 300px; 
    border: 10px solid red;
    padding:50px; 
    background:url(‘/i/bg.png‘) no-repeat;
    -moz-background-origin:content-box; /*mozila Gecko*/
    -webkit-background-origin:content-box; /*webkit*/
    -o-background-origin:content-box; /*presto*/
    background-origin:content-box; /*W3C*/
}

css3背景

标签：

原文地址：http://www.cnblogs.com/sanbao/p/5140062.html