CSS3 - Multi Background
Multi Background
A propriedade CSS de fundo múltiplo é usada para adicionar uma ou mais imagens por vez sem código HTML. Podemos adicionar imagens de acordo com nosso requisito. Um exemplo de sintaxe de imagens de fundo múltiplo é a seguinte -
#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;
}
Os valores mais comumente usados são mostrados abaixo -
Sr. Não. | Valor e descrição |
---|---|
1 | background Usado para definir todas as propriedades da imagem de fundo em uma seção |
2 | background-clip Usado para declarar a área de pintura do fundo |
3 | background-image Usado para especificar a imagem de fundo |
4 | background-origin Usado para especificar a posição das imagens de fundo |
5 | background-size Usado para especificar o tamanho das imagens de fundo |
Exemplo
A seguir está o exemplo que demonstra as várias imagens de fundo.
<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>
Isso produzirá o seguinte resultado -
Tamanho do fundo múltiplo
A propriedade de vários planos de fundo é aceita para adicionar tamanhos diferentes para imagens diferentes. Um exemplo de sintaxe é mostrado abaixo -
#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;
}
Conforme mostrado acima, um exemplo, cada imagem tem tamanhos específicos como 50px, 130px e tamanho automático.