📌  相关文章
📜  CSS3-多背景

📅  最后修改于: 2020-10-26 04:57:03             🧑  作者: Mango

多背景

CSS Multi background属性用于一次添加一个或多个图像而无需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 & Description
1

background

Used to setting all the background image properties in one section
2

background-clip

Used to declare the painting area of the background
3

background-image

Used to specify the background image
4

background-origin

Used to specify position of the background images
5

background-size

Used to specify size of the background images

例

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

现场演示

   

   
   
      

         
www.tutorialspoint.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和自动尺寸。