CSS3 - 多背景(CSS3 - Multi Background)
多背景
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. | 价值和描述 |
|---|---|
| 1 | background 用于在一个部分中设置所有背景图像属性 |
| 2 | background-clip 用于声明背景的绘画区域 |
| 3 | background-image 用于指定背景图像 |
| 4 | background-origin 用于指定背景图像的位置 |
| 5 | background-size 用于指定背景图像的大小 |
例子 (Example)
以下是演示多背景图像的示例。
<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>www.iowiki.com</h1>
<p>
IOWIKI 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>
它会产生以下结果 -
新页面打开多背景的大小
接受多背景属性为不同的图像添加不同的大小。示例语法如下所示 -
#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和自动尺寸的特定尺寸。
