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地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 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/03/14 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python实现简单的代理服务器
2015/07/25 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
python中添加模块导入路径的方法
2021/02/03 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
优秀应届毕业生推荐信
2014/02/18 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
宣传口号大全
2014/06/16 职场文书
小学生春游活动方案
2014/08/20 职场文书
授权收款委托书
2014/09/23 职场文书
实习生个人总结范文
2015/02/28 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server