background
Resumo
A propriedade CSS background
é um atalho para definir os valores de fundo individuais em um único lugar na folha de estilo. Background pode ser usado para definir os valores para um ou mais dos seguintes: background-clip
, background-color
, background-image
(en-US), background-origin
, background-position
, background-repeat
(en-US), background-size
e background-attachment
.
O fundo
CSS propriedade estenográfica atribui valores dados explícitos e conjuntos de propriedades para seus valores iniciais em falta.
Initial value | as each of the properties of the shorthand:
|
---|---|
Aplica-se a | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | não |
Percentages | as each of the properties of the shorthand:
|
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Sintaxe
/ * Usando uma <cor-de-fundo> * /
background: green;
/ * Usando uma <imagem-de-fundo> e <estilo-de-repetição> * /
background: url("test.jpg") repeat-y;
/ * Usando uma <box> e <cor-de-fundo> * /
background: border-box red;
/ * Uma única imagem, centrado e escalado * /
background: no-repeat center/80% url( "../img/image.png");
background-color
só pode ser definido no último fundo, como há apenas uma cor de fundo para todo o elemento.Valores
Um ou mais dos seguintes, por qualquer ordem:
<anexo>
- Veja
background-attachment
<box>
- Veja
background-clip
<cor-de-fundo>
- Veja
background-color
<imagem-de-fundo>
- Veja
background-image
(en-US) <posição>
- Veja
background-position
<estilo-de-repetição>
- Veja
background-repeat
(en-US) <tamanho-do-fundo>
- Veja
background-size
. Esta propriedade deve ser especificado após <posição> , separados com o caractere '/'.
Sintaxe formal
[ (en-US) <bg-layer> , ] (en-US)* (en-US) <final-bg-layer>where
<bg-layer> = <bg-image> || (en-US) <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <attachment> || (en-US) <box> || (en-US) <box>
<final-bg-layer> = <'background-color'> || (en-US) <bg-image> || (en-US) <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <attachment> || (en-US) <box> || (en-US) <box>where
<bg-image> = none | (en-US) <image>
<bg-position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US) [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US) ] (en-US)
<bg-size> = [ (en-US) <length-percentage> | (en-US) auto ] (en-US){ (en-US)1,2} (en-US) | (en-US) cover | (en-US) contain
<repeat-style> = repeat-x | (en-US) repeat-y | (en-US) [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){ (en-US)1,2} (en-US)
<attachment> = scroll | (en-US) fixed | (en-US) local
<box> = border-box | (en-US) padding-box | (en-US) content-boxwhere
<image> = <url> (en-US) | (en-US) <image()> | (en-US) <image-set()> | (en-US) <element()> | (en-US) <paint()> | (en-US) <cross-fade()> | (en-US) <gradient>
<length-percentage> = <length> (en-US) | (en-US) <percentage> (en-US)where
<image()> = image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ] (en-US)! (en-US) )
<image-set()> = image-set( <image-set-option># (en-US) )
<element()> = element( <id-selector> )
<paint()> = paint( <ident> (en-US), <declaration-value>? (en-US) )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? (en-US) )
<gradient> = <linear-gradient()> | (en-US) <repeating-linear-gradient()> | (en-US) <radial-gradient()> | (en-US) <repeating-radial-gradient()> | (en-US) <conic-gradient()>where
| (en-US) rtl
= ltr
<image-src> = <url> (en-US) | (en-US) <string> (en-US)
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
<image-set-option> = [ (en-US) <image> | (en-US) <string> (en-US) ] (en-US) <resolution> (en-US)
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage> (en-US)? (en-US) && (en-US) <image>
<cf-final-image> = <image> | (en-US) <color>
<linear-gradient()> = linear-gradient( [ (en-US) <angle> (en-US) | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ (en-US) <angle> (en-US) | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ (en-US) from <angle> (en-US) ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US), <angular-color-stop-list> )where
<rgb()> = rgb( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )
<side-or-corner> = [ (en-US) left | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) bottom ] (en-US)
<color-stop-list> = [ (en-US) <linear-color-stop> [ (en-US), <linear-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <linear-color-stop>
<ending-shape> = circle | (en-US) ellipse
<size> = closest-side | (en-US) farthest-side | (en-US) closest-corner | (en-US) farthest-corner | (en-US) <length> (en-US) | (en-US) <length-percentage>{ (en-US)2} (en-US)
<position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US) ] (en-US)
<angular-color-stop-list> = [ (en-US) <angular-color-stop> [ (en-US), <angular-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <angular-color-stop>where
<alpha-value> = <number> | (en-US) <percentage> (en-US)
<hue> = <number> | (en-US) <angle> (en-US)
<linear-color-stop> = <color> <color-stop-length>? (en-US)
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && (en-US) <color-stop-angle>? (en-US)
<angular-color-hint> = <angle-percentage>where
<color-stop-length> = <length-percentage>{ (en-US)1,2} (en-US)
<color-stop-angle> = <angle-percentage>{ (en-US)1,2} (en-US)
<angle-percentage> = <angle> (en-US) | (en-US) <percentage> (en-US)
Exemplos
HTML
<p class="Topbanner">
céu estrelado<br/>
Cintilando Cintilando<br/>
Céu estrelado
</p>
<p class="atencao">Este é um parágrafo<p>
CSS
.atencao {
background: red;
}
.Topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}
Resultado
Especificações
Especificação | estado | Comente |
---|---|---|
Unknown The definition of 'fundo' in that specification. |
Desconhecido | A propriedade taquigráfica foi estendido para suportar múltiplas origens e a nova background-size , background-origem e background-clip propriedades. |
CSS Level 2 (Revision 1) The definition of 'background' in that specification. |
Recomendação | Não ocorreram alterações significativas |
CSS Level 1 The definition of 'background' in that specification. |
Recomendação | definição inicial |
Compatibilidade do navegador
BCD tables only load in the browser
A tabela de compatibilidade desta página é gerada por meio de dados estruturados. Se você pudesse contribuir com a criação de dados, por favor verifique https://github.com/mdn/browser-compat-data e envie-nos um pull request.