css3中background新增的4个新的相关属性用法介绍


Posted in HTML / CSS onSeptember 26, 2013

关于background属性用法,相信许多重构人员都很熟悉了,在css3中,background属性依然保持以前的用法,不过可以允许在该属性中添加多个背景图像组,背景图像之间通过逗号进行分隔。增加了4个新的相关属性。

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

background-origin 指定绘制背景图像的起点

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

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

background-clip

目前webkit引擎的safari和chrome浏览器支持,mozilla Gecko引擎 和Presto引擎(opera11.0以上)和trident引擎(ie9以上)都支持这个属性,但是版本低的可能需要带上各自的私有属性,

background-clip:padding-box || border-box || content-box

background-clip 属性用来判断背景是否包含边框区域,一般默认的background-color是从元素的边框的左上角起到右下角为止,而backround-image却不一样,从padding边缘的左上角到border右下角边缘为止;用background-clip控制背景色和背景图片的显示区域,解决以上默认的问题,

border-box:从边框区域向外裁剪背景;

padding-box:从补白区域向外裁剪背景;

content-box:从内容区域向外裁剪背景

no-clip:从边框区域向外裁剪背景

HTML / CSS 相关文章推荐
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 #HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 #HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 #HTML / CSS
css3进行截取替代js的substring
Sep 02 #HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 #HTML / CSS
css3学习心得分享
Aug 19 #HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 #HTML / CSS
You might like
eAccelerator的安装与使用详解
2013/06/13 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
JS 统计时间
2021/03/09 Javascript
javascript事件问题
2009/09/05 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
如何运行Python程序的方法
2013/04/21 Python
python利用datetime模块计算时间差
2015/08/04 Python
python迭代器与生成器详解
2016/03/10 Python
Python+微信接口实现运维报警
2016/08/27 Python
Python处理Excel文件实例代码
2017/06/20 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python实现扫雷游戏的示例
2020/10/20 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
配件采购员岗位职责
2013/12/03 职场文书
淘宝活动策划方案
2014/02/06 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
交通事故协议书
2014/04/15 职场文书
死亡赔偿协议书
2015/01/28 职场文书
青涩记忆观后感
2015/06/18 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书