background-origin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
A propriedade CSS background-origin define a área de posicionamento do plano de fundo, isto é, a ponto de origem de uma imagem específica usando a propriedade background-image.
Experimente
background-origin: border-box; background-repeat: no-repeat; background-origin: padding-box; background-repeat: no-repeat; background-origin: content-box; background-repeat: no-repeat; <section id="default-example"> <div id="example-element">This is the content of the element.</div> </section> #example-element { background-image: url("/shared-assets/images/examples/leopard.jpg"); color: #d73611; text-shadow: 2px 2px black; padding: 20px; border: 10px dashed #333; font-size: 2em; font-weight: bold; } Note que background-origin é ignorado quando background-attachment é fixed.
Nota: A taquigrafia background redefine o valor desta propriedade para seu valor inicial se esta não foi específicada.
Sintaxe
/* Valores chave */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /* Valores globais */ background-origin: inherit; background-origin: initial; background-origin: unset; A propriedade background-origin é especificada por uma chave de valores listadas abaixo.
Valores
border-box-
O plano de fundo é posicionado relativamente nas bordas do elemento.
padding-box-
O plano de fundo é posicionado relativamente no espaçamento do elemento.
content-box-
O plano de fundo é posicionado relativamente para o conteúdo do elemento.
Sintaxe formal
background-origin =
<visual-box>#
<visual-box> =
content-box |
padding-box |
border-box
Exemplos
.exemplo { border: 10px double; padding: 10px; background: url("image.jpg"); background-position: center left; background-origin: content-box; } #exemplo2 { border: 4px solid black; padding: 10px; background: url("image.gif"); background-repeat: no-repeat; background-origin: border-box; } div { background-image: url("logo.jpg"), url("mainback.png"); /* Applies two images to the background */ background-position: top right, 0px 0px; background-origin: content-box, padding-box; } Especificações
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-origin |
Compatibilidade com navegadores
Loading…