CSS3 - wiele tła
Multi Tło
Właściwość CSS Multi background służy do dodawania jednego lub więcej obrazów naraz bez kodu HTML.Możemy dodawać obrazy zgodnie z naszymi wymaganiami.Przykładowa składnia wielu obrazów tła jest następująca:
#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;
}Poniżej przedstawiono najczęściej używane wartości -
| Sr.No. | Wartość i opis |
|---|---|
| 1 | background Służy do ustawiania wszystkich właściwości obrazu tła w jednej sekcji |
| 2 | background-clip Służy do zadeklarowania obszaru malowania tła |
| 3 | background-image Służy do określenia obrazu tła |
| 4 | background-origin Służy do określania położenia obrazów tła |
| 5 | background-size Służy do określania rozmiaru obrazów tła |
Przykład
Poniżej znajduje się przykład, który demonstruje obrazy tła z wieloma obrazami.
<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.tutorialspoint.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>To da następujący wynik -
Rozmiar tła Multi
Dopuszczalna jest właściwość Multi background w celu dodania różnych rozmiarów dla różnych obrazów. Przykładowa składnia jest pokazana poniżej -
#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;
}Jak pokazano na powyższym przykładzie, każdy obraz ma określone rozmiary, takie jak 50 pikseli, 130 pikseli i rozmiar automatyczny.