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 站点看一下简单的案例说明。

时间: 2024-11-01 11:37:52

css3对background属性调整与增强的相关文章

css3教程:background属性调整增强

网页制作Webjx文章简介:css3.0对background的调整与增强. (注:仅对css3对background的调整.增加的属性进行了翻译)css3对于backgrounds做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个背景图片.代码类似与css2.0版本的写法,但引用图片之间需用","逗号隔开.第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显

CSS3对background的调整和增加的属性

CSS3对于backgrounds做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个背景图片.代码类似与css2.0版本的写法,但引用图片之间需用","逗号隔开.第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下: background-image: url(top-image.jpg), url(middle-image.jpg), url(bo

图解css3:核心技术与案例实战. 3.4 CSS3圆角边框属性

3.4 CSS3圆角边框属性 在Web页面上圆角效果很常见.圆角给页面增添曲线之美,让页面不那么生硬,但是为了设计圆角效果,Web设计师们要花费更多的时间与精力. 3.4.1 border-radius属性的语法及参数 CSS3中专门针对元素的圆角效果增加了一个圆角属性border-radius.Web设计师不会为Web页面中的圆角效果纠结了. 语法: border-radius: none | <length> {1,4}[/<length>{1,4}] ? border-rad

图解css3:核心技术与案例实战. 3.5 CSS3盒子阴影属性

3.5 CSS3盒子阴影属性 box-shadow也是CSS3新增的一个重要属性,用来定义元素的盒子阴影.本节主要介绍CSS3的box-shadow的属性以及如何使用. 3.5.1 box-shadow属性的语法及参数 在具体学习box-shadow使用方法之前,我们必须先知道box-shadow使用的语法规则. box-shadow:none | [ <length> <length> <length>?<length>? || <color>

图解css3:核心技术与案例实战. 3.3 CSS3图片边框属性

3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出background-image属性的功能,功能比background-image强大,我们可以使用border-image属性给任何元素( 除border-collapse属性值为collapse的table元素之外)设置图片效果边框,还可以使用这个来制作圆角按钮效果.渐变的Tabs效果等. 3.3.1 bor

图解css3:核心技术与案例实战. 3.2 CSS3边框颜色属性

3.2 CSS3边框颜色属性 border-color属性早在CSS1中就已经定义了.不过,CSS3增强了这个属性的功能,使用它可以为元素边框设置更多的颜色,从而方便Web设计人员设计出更为绚丽的边框效果,例如渐变的边框效果.多颜色的边框效果等. 3.2.1 border-color属性的语法及参数 border-color的语法看上去和CSS1中的完全相同,但为了避免与border-color属性的原功能(也就是在CSS1中的定义边框颜色功能)发生冲突,CSS3在这个属性上做出一定的修改.语法

CSS3展现精彩的动画效果 css3的动画属性

文章简介:因为CSS3,动画将一切皆有可能. 热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Animation. transform属性虽然看起来可以实现动画的效果,但本质其实是静态的,说白一点其实就是一个图形的变形工具:而transition属性是一个简单 的动画属性,操作起来非常的简单:在这里主要为大家介绍Animations属性,这是个名副其实的动

css3中opacity属性学习与实践

css3中opacity属性是如何使用的呢:<length> inherit length:由浮点数字和单位标识符组成的长度值0到1.不可为负值.默认值为:1 . 此标签的作用是声明一个元素的透明度,opacity取值为1的元素是完全不透明的,反之,取值为0是完全透明的,看不见的.1到0之间的任何值都表示该元素的透明程度. 兼容:Firefox 3.0.10 .Chrome 2.0.x.Opera 9.64..Safari 4.Firefox 3.5 目前较老的Firefox版本,我们需要使用

css3文本阴影属性text

css3文本阴影属性text-shadow的几点说明: css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性: text-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色 Firefox,webkit内核的Safari和Chrome,Opera支持Text Shadow(文本阴影):text-shadow:2px 2px 5px #333333 一个文本可以使用多个文本阴影 IE不支