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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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递归实现无限分类的方法
2015/07/28 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
php实现微信模板消息推送
2018/03/30 PHP
php和asp语法上的区别总结
2019/05/12 PHP
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python连接DB2数据库
2016/08/27 Python
python生成圆形图片的方法
2020/03/25 Python
浅谈python标准库--functools.partial
2019/03/13 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
机械个人求职信范文
2014/01/24 职场文书
会计自荐信范文
2014/03/09 职场文书
同居协议书范本
2014/04/23 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
出生证明范本
2015/06/15 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书