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 相关文章推荐
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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制作静态网站的模板框架(二)
2006/10/09 PHP
php提取微信账单的有效信息
2018/10/01 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
Python类的基础入门知识
2008/11/24 Python
Python的time模块中的常用方法整理
2015/06/18 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
Python 类的继承实例详解
2017/03/25 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Django中的用户身份验证示例详解
2019/08/07 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
大学生村官演讲稿
2014/04/25 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫