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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Python切换pip安装源的方法详解
2016/11/18 Python
python 两个数据库postgresql对比
2019/10/21 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python实现吃苹果小游戏
2020/03/21 Python
Python可以实现栈的结构吗
2020/05/27 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
Python类class参数self原理解析
2020/11/19 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
会计实习生工作总结的自我评价
2013/10/07 职场文书
气象学专业个人求职信
2014/03/15 职场文书
集中采购方案
2014/06/10 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
员工旷工检讨书
2015/08/15 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
Python 阶乘详解
2021/10/05 Python
Kubernetes控制节点的部署
2022/04/01 Servers