Como fazer avançar uma imagem com CSS

Ao criar páginas da Web, as imagens no seu site podem se sobrepor ao texto e ao conteúdo da página. Felizmente, você tem a capacidade de avançar uma imagem usando folhas de estilo em cascata (CSS). Com o CSS, use o atributo z-index, semelhante ao recurso “Trazer para a frente” de um programa de processamento de texto, para posicionar seus gráficos. Use um editor de texto no seu computador para aplicar o CSS que modifica a posição das suas imagens.

Passo 1

Abra o editor de texto e, em seguida, o arquivo do site que contém a imagem que você deseja modificar.

Etapa 2

Escreva o seguinte código CSS depois de abrir a tag:

Etapa 3

Coloque o cursor entre os elementos de estilo e digite um sinal numérico seguido de um termo de sua escolha (por exemplo, “#forward”). Escreva algumas chaves depois disso, como visto aqui para criar a regra de estilo para sua imagem:

encaminhar {}

O sinal numérico cria um ID CSS, que permite criar uma regra diferente para uma imagem específica em sua página.

Etapa 4

Digite “position: absolute;” entre colchetes para dizer ao navegador para mostrar sua imagem exatamente onde você especificar. Além disso, digite “z-index:” e insira um valor positivo em pixels (px) como este:

frente {posição: absoluta; índice z: 5px;}

O índice Z determina qual ordem aparece na imagem; portanto, um valor positivo mais alto indica que a imagem está mais à frente.

Etapa 5

Encontre o código da imagem que deseja atribuir à regra de estilo CSS e escreva “id = # forward” dentro da tag. Por exemplo:

Certifique-se de substituir “#forward” pelo nome da sua própria regra CSS.

Etapa 6

Salve o arquivo e veja uma prévia do seu trabalho em um navegador da web para ver a nova posição da imagem.

Referências

 

Você pode estar interessado:

Deixe um comentário