CSS3在background上的调整与增强.pdfVIP

CSS3 在backgrounds 的上做了一些修改，其中最为明显的就是对于背景的设置，开发者不 仅为其增加了4个新的属性，并且还将属性功能进行了加强与调整。现在我们就来看一看开 发者们，又给我们带来了什么样的惊喜呢？ 1、多背景图片 在CSS3中，你可以在一个元素中运用多个图片作为背景。所被引用的图片之间以“，”隔开。 其中第一张图片作为定位在元素上的背景，而后面的图片则按照顺序在他下面依次进行显 示，例如：background-image: url(top-image.jpg),url(middle-image.jpg),url(bottom-image.jpg); 2、属性新成员：BackgroundClip 这个新的属性使得我们能够掌控背景的显示位置。属性值如下： 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、属性新成员：BackgroundOrigin 这一属性需与background-position进行配合后才能使用。使用者可以通过background-position 来定位从border，padding或contentboxes等内容计算起。 1)background-origin：border; 自border边框位置起 2)background-origin：padding; 自padding位置起 3)background-origin：content; 自content-box内容区域起； 关于background-clip与background-origin的区别，你们有兴趣的话可以登入这个网址加以了 解，中对此进行了一番极为详细的讲解。 4、属性新成员：Background Size 此属性主要用来重现设置你背景图片。 1)background-size:contain; 通过对图片比例的缩小来使其符合相对应的元素 2)background-size:cover; 放大背景图片并且将其延伸至整个标签的大小 3)background-size:100px100px; 限定背景图片的尺寸、大小 4)background-size:50%100%; 根据内容元素的大小来缩放图片的尺寸