Esta postagem explicará brevemente o método para adicionar a imagem de um URL.
Como adicionar uma imagem de um URL em HTML/CSS?
Em HTML/CSS, dois métodos estão disponíveis para adicionar uma imagem usando a URL, listada abaixo:
- Método 1: adicionar imagem usando um elemento em HTML
- Método 2: adicionar imagem usando propriedades CSS em HTML
Método 1: adicionar imagem usando o elemento
O ' ” é um único elemento void que não tem conteúdo filho e tag final. O ' origem ' e ' tudo ” são dois atributos-chave que são utilizados dentro da tag “ ”.
Vejamos as instruções abaixo para adicionar uma imagem usando o elemento !
Etapa 1: criar um contêiner div
Primeiro, crie um contêiner div utilizando o “ Em seguida, use a tag de cabeçalho necessária de “ ' para ' ' marcação. Por exemplo, utilizaremos a tag Depois disso, adicione um “ ” e insira os atributos listados abaixo dentro da tag de imagem: De acordo com a saída abaixo, a imagem especificada foi adicionada com sucesso: Os desenvolvedores também podem adicionar a imagem de um URL usando o CSS “ imagem de fundo ” CSS. para esse fim, siga as etapas abaixo. Primeiro, insira um texto de cabeçalho com a ajuda da tag de abertura e fechamento Em seguida, crie um contêiner div utilizando a tag Agora, acesse a aula através do seletor de pontos “ . ” e o nome da classe que foi criada anteriormente. Depois disso, aplique as propriedades CSS listadas abaixo para adicionar a imagem de uma URL dentro da classe: No código fornecido acima: Saída Você aprendeu sobre os diferentes métodos para adicionar imagens de um URL. Para adicionar uma imagem de um URL, os desenvolvedores podem utilizar o “ ' marcação. Em seguida, insira o “ origem ” e atribua a URL como o valor “src”. Além disso, o usuário pode adicionar uma imagem da URL usando o CSS “ imagem de fundo ' propriedade. Este artigo indicou os métodos para adicionar a imagem da URL em HTML/CSS.
Passo 2: Inserir Título
e adicionaremos o texto específico como um cabeçalho dentro das tags de abertura e fechamento.
Etapa 3: adicionar uma imagem usando URL
< div classe = 'img-conatiner' >
< h2 > Adicionar imagem com URL < / h2 >
< img origem = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' tudo = 'Imagem!' altura = '400 px' largura = '300 px' / >
< / div >
Método 2: adicionar imagem usando propriedades CSS em HTML
Passo 1: Inserir Título
.
Etapa 2: criar contêiner div
> Adicionar imagem com URL
>
Etapa 3: acessar o contêiner
Etapa 4: Adicionar imagem usando a propriedade CSS “background-image”
altura : 400 px ;
largura : 250px ;
tamanho de fundo : conter ;
Imagem de fundo : url ( https : //imagens .pexels .com/photos/ 2260800 /pexels-foto- 2260800 .jpeg? auto = compactar&cs = tinysrgb&w = 1260 &h = 750 &dpr = 1 )
}
Conclusão