css3 background属性调整增强介绍


Posted in HTML / CSS onDecember 18, 2010

(注:仅对css3对background的调整、增加的属性进行了翻译)
css3对于backgrounds做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。

1、多个背景图片
在css3里面,你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开。第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

2、新属性:Background Clip
此讨论让我们回到文章开始提到的关于背景被border边框遮挡的问题。background-clip的添加让我们完全能够控制背景显示的位置。属性值如下:
(1)background-clip: border;背景在border边框下开始显示
(2)background-clip: padding;背景在padding下开始显示,而不是border边框下开始
(3)background-clip: content;背景在内容区域下开始显示,而不是border边框下开始或padding下开始。
(4)background-clip: no-clip;默认属性值,类似与background-clip: border;

3、新属性: Background Origin

此属性需要与background-position配合使用。你可以用background-position计算定位是从border,padding或content boxes内容区域算起。(类似background-clip)
(1)background-origin:border;
从border边框位置算起
(2)background-origin:padding;
从padding位置算起
(3)background-origin:content;
从content-box内容区域位置算起;

background-clip和background-origin的不同之处www.CSS3.info网站给做了很好的分析讲解。

4、新属性:Background  Size
Background Size属性用来重设你的背景图片。有几个属性值:
(1)background-size: contain;
缩小背景图片使其适应标签元素(主要是像素方面的比率)
(2)background-size: cover;
让背景图片放大延伸到整个标签元素大小(主要是像素方面的比率)
(3)background-size: 100px 100px;
标明背景图片缩放的尺寸大小
(4)background-size: 50% 100%;
百分比是根据内容标签元素大小,来缩放图片的尺寸大小

你可以去CSS 3 specifications 站点看一下简单的案例说明。

5、新属性:Background Break

css3里标签元素能被分在不同区域(如:让内联元素span跨多行),background-break属性能够控制背景在不同区域显示。
属性值:

(1)Background-break: continuous;
此属性是默认值,忽视区域之间的间隔空隙(给它们应用图片就好像把它们看成一个区域一样)
(2)Background-break: bounding-box;
重新考虑区域之间的间隔
(3)Background-break: each-box;
对每一个独立的标签区域进行背景的重新划分。

6、背景颜色的调整

background-color属性在css3版本里面稍微做了增强,除了指定background color背景颜色之外,还可以对不使用的标签元素背景图片进行去色处理。

background-color: green / blue;此例子里,这背景颜色可能是绿色,然而,如果底部背景图片无效的话,蓝色将代替绿色来显示。如果你没有指定某个颜色的话,它将其视为透明。

7、背景重复的调整

css2里当设置背景的时候,它经常被标签元素截取而显示不全,css3介绍了2个新属性来修复此问题。
space:图片以相同的间距平铺且填充整个标签元素
round:图片自动缩放直到适应且填充整个标签元素

CSS 3 specifications网站对background-repeat: space的使用就是一个现成的例子。

8、Background Attachment 的调整

Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;),当background-attachment设置为scroll时,背景图片是不随内容滚条滚动的。现在,有了background-attachment:local,就可以做到让背景随元素内容滚动而滚动了。

中文原文:css3.0对background的调整与增强
英文原文:Backgrounds in CSS3

HTML / CSS 相关文章推荐
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 #HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 #HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 #HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 #HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 #HTML / CSS
css3 border-image使用说明
Jun 23 #HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 #HTML / CSS
You might like
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
Webpack的dll功能使用
2018/06/28 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
Python实现excel转sqlite的方法
2017/07/17 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
python绘制高斯曲线
2021/02/19 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
企业管理毕业生求职信
2014/03/11 职场文书
三严三实心得体会范文
2014/10/13 职场文书
门面房租房协议书
2014/12/01 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技