开发手册 欢迎您!
软件开发者资料库

CSS3 - 多背景

CSS3多背景 - 面向初学者和高级开发人员的CSS教程通过示例简单易行地学习层叠样式表。 CSS2和CSS3属性的完整参考手册。

多重背景

CSS多背景属性用于一次添加一个或多个图像而不使用HTML代码.我们可以根据我们的要求添加图像.多背景的示例语法图像如下<

#multibackground {   background-image: url(/css/images/logo.png), url(/css/images/border.png);   background-position: left top, left top;   background-repeat: no-repeat, repeat;   padding: 75px;}

最常用的值显示如下 :

Sr.No.Value&说明
1

背景

用于在一个部分中设置所有背景图像属性

2

background-clip

用于声明背景的绘画区域

3

background-image

用于指定背景图片

4

background-origin

用于指定背景图像的位置

5

background-size

用于指定背景图片的大小

示例

以下是演示多背景图像的示例.

                                 

www.IT屋.com

         

            Tutorials Point originated from the idea that there exists a class of             readers who respond better to online content and prefer to learn new             skills at their own pace from the comforts of their drawing rooms.             The journey commenced with a single tutorial on HTML in  2006 and elated             by the response it generated, we worked our way to adding fresh tutorials             to our repository which now proudly flaunts a wealth of tutorials and             allied articles on topics ranging from programming languages to web designing             to academics and much more..         

      
         

它将产生以下结果 :

多背景大小

多背景属性被接受为不同的图像添加不同的大小.示例语法如下所示 :

#multibackground {   background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;   background-size: 50px, 130px, auto;}

如上图所示,每张图片的特定尺寸为50px,130px和自动尺寸.