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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 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/12/06 PHP
PHP技术开发技巧分享
2010/03/23 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
python re模块的高级用法详解
2018/06/06 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
企业安全生产标语
2014/06/06 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2019 入党申请书范文
2019/07/10 职场文书
python开发飞机大战游戏
2021/07/15 Python
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers