Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Backgrounds – Parte 4: Múltiplas Imagens de Background - Kolaborativa

Backgrounds – Parte 4: Múltiplas Imagens de Background

Múltiplas Imagens de Background


Hoje vamos aprender uma das novidades em CSS3 que mais me agradou, a possibilidade de usar múltiplas backgrounds. Ela pode nos proporcionar uma grande economia de tempo, permitindo obter efeitos que antes exigiam mais de uma div para se atingir. A primeira imagem declarada é posicionada na parte superior do elemento, com imagens posteriores. Um exemplo de utilização da propriedade é:

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Agora vamos entender o que fizemos.

Defini primeiro uma largura e uma altura para a nossa div. O código é muito parecido com o que já conhecemos do CSS2, exceto as vírgulas que são usadas para separar as imagens. Podemos assim colocar várias imagens de fundo e definir sua localização através da propriedade background-position já conhecida do CSS2 que pode ser incerida log após declarada a “url” da imagem. Para ajudar vai aqui os valores válidos para o  background-position:

  • x-pos y-pos
  • x-% y-%
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

Vamos ver mais um exemplo:

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Agora vamos ver como posicionamos cada imagem:

  • css3 background 2 : sol-tutoriais-css3.png posicionada com top e right.
  • css3 background 3 : berserker-tutoriais-css3.png posicionada com bottom e left.
  • css3 background 4 : comic-tutoriais-css3.png posicionada com bottom e right.
  • css3 background 4 : ceu-tutoriais-css3.jpg posicionada com top e repete na horizontal.
  • css3 background 4 : grama-tutoriais-css3.jpg posicionada com bottom e repete na horizontal.

Regras no posionamento:


O background que for declarado primeiro será o de nível superior e, acima de todos os outros Backgrounds.
Por exemplo, o sol (a imagem de fundo em primeiro lugar) será superior a todos os outros, enquanto a grama (imagem de fundo último da lista) será debaixo de todas as outras.

Espero que possamos utilizar com muita criatividade este novo método de posicionamento CSS3 que nos permite criar backgrounds vários níveis e mantê-los organizados.

Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

There are 2 comments. Add yours

  1. 15th junho 2011 | Danilo Ramos says: Responder
    Pow ! legal, agora dá pra colocar várias imagens como background, mas outra alternativa é criar uma imagem só com todos essas imagens ;) Abraço !
    • 16th junho 2011 | Dodilei says: Responder
      Sim é muito legal, mas o interessante é usar diversas imagens, dá mais versatilidade.

Join the Conversation