无涯教程-CSS3 - 多个背景(Background( CSS Multi background属性用于一次添加一个或

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 & Remark
1	background 用于在一个区域中设置所有背景图像属性
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>
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"multibackground"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="tag">&lt;h1&gt;</span><span class="pln">www.learnfk.com</span><span class="tag">&lt;/h1&gt;</span><span class="pln">
     </span><span class="tag">&lt;p&gt;</span><span class="pln">
        Learnfk 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 Learnfk 
        to our repository which now proudly flaunts a wealth of Learnfk and 
        allied articles on topics ranging from programming languages to web designing 
        to academics and much more..
     </span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  

</body>
</html>

它将产生以下输出-

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

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

无涯教程-CSS3 - 多个背景(Background(

Multi background 图像大小

参考链接