30 lines
2.6 KiB
Markdown
30 lines
2.6 KiB
Markdown
|
---
|
||
|
|
title: CSS Images
|
||
|
|
localeTitle: Imagens CSS
|
||
|
|
---
|
||
|
|
## Imagens CSS
|
||
|
|
|
||
|
|
Isso ajuda a adicionar uma imagem a um site.
|
||
|
|
|
||
|
|
#### Amostra de código
|
||
|
|
|
||
|
|
`<img src="picture.jpg" alt="Picture" width="100" height="100">`
|
||
|
|
|
||
|
|
* **src:** Consiste no valor do caminho para a imagem requerida
|
||
|
|
* **alt:** Se a imagem não for exibida, um texto alternativo pode ser exibido usando o atributo alt.
|
||
|
|
* **width:** Isto especifica uma largura para a imagem (pode ser por cento ou px ou auto)
|
||
|
|
* **height:** especifica uma altura para a imagem (pode ser por cento ou px ou auto)
|
||
|
|
|
||
|
|
#### Mais Informações:
|
||
|
|
|
||
|
|
##### Propriedades
|
||
|
|
|
||
|
|
[`image-orientation`](/en-US/docs/Web/CSS/image-orientation "A propriedade CSS de orientação da imagem descreve como corrigir a orientação padrão de uma imagem.") [`image-rendering`](/en-US/docs/Web/CSS/image-rendering "A propriedade CSS de renderização de imagem fornece uma sugestão para o navegador sobre o algoritmo que deve usar para escalar imagens.") [`object-fit`](/en-US/docs/Web/CSS/object-fit "A propriedade CSS de ajuste de objeto especifica como um elemento substituído, como <img> ou <video>, deve ser redimensionado para caber em seu contêiner.") [`object-position`](/en-US/docs/Web/CSS/object-position "A propriedade CSS da posição do objeto determina o alinhamento do elemento selecionado dentro de sua caixa.")
|
||
|
|
|
||
|
|
##### Funções
|
||
|
|
|
||
|
|
[`linear-gradient()`](/en-US/docs/Web/CSS/linear-gradient "A documentação sobre isso ainda não foi escrita; por favor considere contribuir!") [`radial-gradient()`](/en-US/docs/Web/CSS/radial-gradient "A documentação sobre isso ainda não foi escrita; por favor considere contribuir!") [`repeating-linear-gradient()`](/en-US/docs/Web/CSS/repeating-linear-gradient "A documentação sobre isso ainda não foi escrita; por favor considere contribuir!") [`repeating-radial-gradient()`](/en-US/docs/Web/CSS/repeating-radial-gradient "A documentação sobre isso ainda não foi escrita; por favor considere contribuir!") [`element()`](/en-US/docs/Web/CSS/element "A documentação sobre isso ainda não foi escrita; por favor considere contribuir!")
|
||
|
|
|
||
|
|
##### Tipos de dados
|
||
|
|
|
||
|
|
[`<image>`](/en-US/docs/Web/CSS/image "O tipo de dados CSS <image> representa uma imagem 2D. Existem dois tipos de imagens: imagens simples, geralmente referenciadas usando uma URL, e imagens geradas dinamicamente, como aquelas geradas com <gradiente> ou elemento (). As imagens podem ser usadas com várias propriedades CSS, como imagem de fundo, imagem de borda, conteúdo, imagem de estilo de lista e cursor.") [`<uri>`](/en-US/docs/Web/CSS/uri "A documentação sobre isso ainda não foi escrita; por favor considere contribuir!")
|