<image>
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, existente em várias versões dentro de um único arquivo, como alguns formatos .ico. (Nesse caso, a dimensões intrínsecas serão a largura da imagem na área e a proporção mais semelhante à caixa contendo.)
- 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.
Nota: Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.
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
Specification |
---|
CSS Images Module Level 3 # image-values |
Compatibilidade do navegador
BCD tables only load in the browser