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 选择器 基本选择器介绍
Jan 21 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 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函数指定默认值方法的小例子
2013/12/04 PHP
php生成html文件方法总结
2014/12/01 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python英语单词测试小程序代码实例
2019/09/09 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
妈妈活动方案
2014/08/15 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
仰望星空观后感
2015/06/10 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python
hive数据仓库新增字段方法
2022/06/25 数据库
MySQL添加索引特点及优化问题
2022/07/23 MySQL