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 2: background-origin - Kolaborativa

Backgrounds – Parte 2: background-origin

background-origin


Outra novidade CSS3 que vamos aprender em backgrounds é a propriedade background-origin que permite que você especifique onde a imagem de fundo será exibida. A propriedade pode ser configurada para iniciar o posicionamento tanto do border, padding ou content. Ela ainda pode ser usada em conjunto com a propriedade background-position. Isto permite uma maior flexibilidade em termos de colocação de uma imagem de background. Existem três opções, o padrão de border-box, padding-box e content-box. OBS: Lembrando-se que para usar a propriedade no navegador Mozilla Firefox utiliamos antes do código -moz-, e para o Safari e Google Chrome o -webkit-.

Os valores possíveis da propriedade são:

  • background-origin: border-box;

Quando border-box é usado, a posição é relativa ao canto superior esquerdo incluindo a borda.

  • background-origin: padding-box;

A outra opção é padding-box o que significa que a imagem de fundo não vai até a borda. Os backgrounds serão exibidos sobre o padding, não sobre a borda.

  • background-origin: content-box;

No content-box backgrounds exibidos sobre o conteúdo, não incluída a borda e o padding.

Exemplo background-origin: border-box

background-origin: border-box


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Exemplo background-origin: padding-box

background-origin: padding-box


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Exemplo background-origin: content-box

background-origin: content-box


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores


Até o CSS3 ser oficialmente lançado, usaremos as propriedades da seguinte forma:

  • Para o Firefox:

-moz-background-origin: border;

-moz-background-origin: padding;

  • Para Safari e Chrome:

-webkit-background-origin: border;

-webkit-background-origin: padding;

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

Nenhum comentário ainda.

Join the Conversation