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的一个简单导航栏实现
Aug 03 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 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
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
python实现中文输出的两种方法
2015/05/09 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python对数据库操作
2016/03/28 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
基于python实现把图片转换成素描
2019/11/13 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
Java程序员面试90题
2013/10/19 面试题
学校司机岗位职责
2013/11/14 职场文书
食品安全工作方案
2014/05/07 职场文书
行政管理专业求职信
2014/07/06 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
红色电影观后感
2015/06/18 职场文书
董事长开业致辞
2015/07/29 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
react国际化react-intl的使用
2021/05/06 Javascript