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 18 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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/06/11 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
Javascript Objects详解
2014/09/04 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
react基本安装与测试示例
2020/04/27 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
房屋出售协议书
2014/04/10 职场文书
捐助倡议书范文
2014/04/15 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
大学生暑假实习总结
2015/07/13 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python