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 相关文章推荐
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 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/05/13 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
JSON 数据格式介绍
2012/01/13 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
JS前端笔试题分析
2016/12/19 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
React中的refs的使用教程
2018/02/13 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
python使用turtle库绘制时钟
2020/03/25 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
政府采购方案
2014/06/12 职场文书
小学综合实践活动总结
2014/07/07 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
家长会欢迎词
2015/01/23 职场文书
工商局个人工作总结
2015/03/03 职场文书
手机销售员岗位职责
2015/04/11 职场文书
《三国志》赏析
2019/08/27 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python