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;
}

最常用的值如下所示：

序号	值与描述
1	background 用于设置所有背景图像属性的一个部分
2	background-clip 用于声明背景的绘制区域
3	background-image 用于指定背景图像
4	background-origin 用于指定背景图像的位置
5	background-size 用于指定背景图像的大小

示例

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

<html>
   <head>
      <style>
         #multibackground {
            background-image: url(https://geek-docs.com/static/logo.png), url(https://geek-docs.com/static/logo.png);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
   </head>

   <body>

      <div id = "multibackground">
         <h1>www.geek-docs.com</h1>
         <p>
            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..
         </p>
      </div>

   </body>
</html>

它将产生以下结果−

CSS3 多背景

多背景的大小

多背景属性可以接受添加不同图像的不同大小。示例语法如下所示−

#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和自动大小。