Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.
O tipo de data CSS <image>
representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um <url>
, e imagens geradas dinamicamente, geradas por <gradient>
ou element()
. Imagens podem ser usadas em inumeras propriedades CSS, como background-image
, border-image
, content
, cursor
, e list-style-image
.
Tipos de imagens
CSS pode lidar com os seguintes tipos de imagens:
- Imagens com dimensões intrínsecas (tamanho natural), tipo um JPEG, PNG, ou outro formato rasterizado.
- Imagens com multiplas dimensões intrínsecas,
- Imagens sem dimensões intrínsecas mas com um aspecto intrínseco entre a largura e altura, como um SVG ou outro vetor.
- Imagens com nenhuma dimensões intrínsecas, e nenhuma relação de aspecto intrínseco como um gradiente CSS.
CCS determina um tamanho concreto do objeto usando (1) suas dimensões intrínsecas; (2) seu tamanho especificado, definido por propriedades CSS como width
, height
, ou background-size
; e (3) é o tamanho padrão, determinado pelo tipo de propriedade em que a imagem é usada:
Tipo de objeto | Tamanho do objeto padrão |
---|---|
background-image |
O tamanho da área de posicionamento do fundo do elemento. |
list-style-image |
O tamanho de um carácter 1em |
border-image |
O tamanho da área da imagem da borda do elemento |
cursor |
O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente |
border-image-source |
? |
mask-image |
? |
shape-outside |
? |
mask-border-source |
? |
Substituí o conteúdo, como quando combinando content com um pseudo-elemento (::after ou ::before ) |
Um 300px × 150px retângulo |
O tamanho do objeto concreto é calculado usando o seguinte algoritimo:
- Se o tamanho especificado define tanto a largura quanto a altura, esses valores serão usado no tamanho concreto do objeto.
- Se o tamanho especificado define apenas a largura ou a altura, o valor que falta é determind se o valor espeficiado ado usando a relação intrínseca, se existir algum, as dimensões intrínsecas se o valoer espeficicado combinar, ou o tamanho do objeto padrão para esse valor ausente.
- Se o tamanho especificado define nem largura ou altura, o tamanho concreto é calculado de modo que corresponda à proporção intrínseca da imagem mas sem exceder o tamanho padrão do objeto em qualquer dimensão. Se a imagem não tiver relação de aspecto intrínseco, o relação de aspecto intrínseco do objeto é aplicado para ser usado; se esse objeto for vazio, a largura ou altura que faltam são retirados do tamanho de objeto padrão.
Sintaxe
O tipo de data <image>
pode ser representado por qualquer item seguinte:
- Uma imagem denotada pelo tipo de data
<url>
- Um tipo de data
<gradient>
- Uma parte da página web, definida pela função
element()
Exemplos
Imagens válidas
url(test.jpg) /* Uma <url>, enquanto test.jpg é uma imagem real */ linear-gradient(blue, red) /* Um <gradient> */ element(#realid) /* Uma parte da página web, referenciada por uma função element() se "realid" for um ID existente na página */
Imagens inválidas
cervin.jpg /* Um arquivo imagem deve ser definido usando a função url(). */ url(report.pdf) /* Um arquivo apontado pela função url() deve ser uma imagem. */ element(#fakeid) /* Um elemento ID deve ser um ID existente na página. */
Especificações
Especificações | Status | Comentário |
---|---|---|
CSS Images Module Level 4 The definition of '<image>' in that specification. |
Rascunho atual | Adiciona element() , image() , conic-gradient() , repeating-conic-gradient() , e image-resolution . |
CSS Images Module Level 3 The definition of '<image>' in that specification. |
Candidata a Recomendação | Definição inicial. Depois disso, não existe definição explicita do tipo de data <image>. Imagens podem ser somente definidas usando a notação funciona url() . |
Compatibilidade do navegador
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support Yes | Edge Full support Yes | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
<gradient> | Chrome
Full support
Yes
| Edge Full support Yes | Firefox
Full support
Yes
| IE
Full support
10
| Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android
Full support
Yes
| Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
conic-gradient() | Chrome
Full support
69
| Edge No support No | Firefox No support No | IE No support No | Opera Full support 56 | Safari
?
| WebView Android
Full support
69
| Chrome Android
Full support
69
| Edge Mobile No support No | Firefox Android No support No | Opera Android Full support 56 | Safari iOS
?
| Samsung Internet Android No support No |
element() | Chrome No support No | Edge ? | Firefox
Full support
4
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android ? | Edge Mobile ? | Firefox Android
Full support
4
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.