CSS3 ::多背景

多背景

CSS多背景属性用于一次添加一个或多个图像而无需HTML代码，我们可以requirement.A根据多背景图像的示例语法添加图像，如下所示-

#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	背景用于在一个区域中设置所有背景图像属性
2	background-clip用于声明背景的绘画区域
3	background-image用于指定背景图像
4	background-origin用于指定背景图像的位置
5	background-size用于指定背景图像的大小

示例

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

<html>
   <head>
      <style>
         #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;
         }
      </style>
   </head>

   <body>
   
      <div id = "multibackground">
         <h1>WhileifBlog</h1>
         <p>
           Lorem Ipsum
         </p>
      </div>
      
   </body>
</html>

多背景尺寸

接受多背景属性以为不同的images.A示例语法添加不同的大小，如下所示-

#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和自动尺寸。

基础教程