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实现宠物小鸡实例代码
Oct 08 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 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
我的论坛源代码(八)
2006/10/09 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
年会搞笑主持词串词
2014/03/24 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
趣味运动会策划方案
2014/06/02 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书