css3背景

最新推荐文章于 2024-01-10 12:25:01 发布

weixin_30575309

最新推荐文章于 2024-01-10 12:25:01 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sanbao/p/5140062.html

背景属性

　　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*/
}

转载于:https://www.cnblogs.com/sanbao/p/5140062.html