Como adicionar um URL de imagem à sua div


Você deseja colocar uma imagem ou duas em uma página da web. Uma maneira é usar o background-image Propriedade CSS.

Lojas Americanas

Essa propriedade aplica uma ou mais imagens de plano de fundo a um elemento, como um

Lojas Americanas
, Enquanto o documentação explica. Use-o por motivos estéticos, como adicionar um plano de fundo texturizado à sua página da web.

É fácil adicionar uma imagem usando a propriedade background-image. Basta fornecer o caminho para a imagem no url() valor.

O caminho da imagem pode ser um URL, como mostrado no exemplo abaixo.

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

Ou pode ser um caminho local. Aqui está um exemplo.

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

Você pode aplicar várias imagens à propriedade background-image.

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
   background-position: right, left; 
}

Isso é muito código. Vamos dividir.

Separe cada imagem url() valor com uma vírgula.

background-image: 
    url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
    url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

Agora posicione e aprimore suas imagens aplicando propriedades adicionais.

background-repeat: no-repeat, no-repeat;
background-position: right, left; 

Existem vários subpropriedades você pode adicionar às suas imagens de fundo, como background-repeat e background-position, que usamos no exemplo acima. Você pode até adicionar gradientes para uma imagem de fundo.

Veja como é quando reunimos tudo.

A ordem em que você lista suas imagens é importante devido à ordem de empilhamento. Isso significa que a primeira imagem listada é a mais próxima do usuário, de acordo com o documentação. Então, o próximo, e o próximo, e assim por diante.

Aqui está um exemplo.

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
}

Listamos duas imagens no código acima. A primeira imagem (marrocos-blue-png) estará na frente da segunda (oriental-tiles.png). Ambas as imagens têm o mesmo tamanho e não têm opacidade, portanto, vemos apenas a primeira imagem.

Mas se movermos a segunda imagem (oriental-tiles.png) para a direita em 200 pixels, você poderá ver parte dela (o restante permanece oculto).

Aqui está o que parece quando reunimos tudo.

Quando você deve usar a imagem de fundo?

Há muito o que gostar sobre a propriedade da imagem de plano de fundo. Mas há uma desvantagem.

A imagem pode não estar acessível a todos os usuários, o documentação ressalta, como aqueles que usam leitores de tela.

Isso ocorre porque você não pode adicionar informações textuais à propriedade da imagem de plano de fundo. Como resultado, a imagem será perdida pelos leitores de tela.

Use a propriedade background-image apenas quando precisar adicionar uma decoração à sua página. Caso contrário, use o HTML elemento se uma imagem tiver significado ou propósito, como documentação notas.

Dessa forma, você pode adicionar texto a um elemento de imagem, usando o alt atributo que descreve a imagem. O texto fornecido será coletado pelos leitores de tela.

Uma casa de vidro projetada por Ludwig Mies van der Rohe, localizada em Plano, Illinois.

Pense da seguinte maneira: background-image é uma propriedade CSS, e o CSS foca na apresentação ou no estilo; O HTML foca na semântica ou no significado.

Quando se trata de imagens, você tem opções. Se for necessária uma imagem para decoração, a propriedade da imagem de fundo pode ser uma boa opção para você.

Escrevo sobre aprender a programar e as melhores maneiras de fazer isso (amymhaddad.com)



Fonte

Leave a Reply

Your email address will not be published. Required fields are marked *