Os recursos da linguagem de marcação - HTML - e folhas de estilo em cascata - CSS - permitem que você coloque uma imagem dentro de outra de várias maneiras. Claro, isso requer algumas habilidades em layout de página da web e você precisa escolher um método específico com base no código existente. No entanto, em alguns casos, você pode fazer sem editar o código-fonte.
Instruções
Passo 1
Existe uma maneira de colocar uma imagem na outra sem nenhuma alteração nas páginas do site. Para fazer isso, basta editar a imagem de fundo armazenada no servidor - use qualquer editor gráfico para colocar a imagem de primeiro plano nele. Se esse método funcionar para você, comece definindo o local de armazenamento e o nome do arquivo de imagem de fundo. Isso pode ser feito localizando-o no código-fonte da página ou abrindo-o em uma guia separada e observando o caminho completo na barra de endereço do navegador.
Passo 2
Usando o gerenciador de arquivos do sistema de gerenciamento de conteúdo ou cliente FTP, baixe o arquivo necessário para o seu computador e abra-o em qualquer editor gráfico - por exemplo, no aplicativo Paint instalado com o Windows.
etapa 3
Coloque a imagem de primeiro plano sobre o fundo - no Paint, para isso, você precisa selecionar o item "Inserir de" na lista suspensa "Inserir" na guia "Página inicial" e encontrar o arquivo necessário na caixa de diálogo que se abre. Em seguida, ajuste a posição da imagem inserida no fundo existente (arraste com o mouse) e salve o resultado (Ctrl + S).
Passo 4
Carregue de volta a imagem editada, substituindo a antiga. Isso completa o procedimento.
Etapa 5
O método descrito é inconveniente no caso em que as imagens inseridas precisam ser alteradas de vez em quando. Em seguida, use os recursos da linguagem HTML - por exemplo, faça da imagem de plano de fundo o plano de fundo do elemento da página em que a imagem de primeiro plano será colocada. Esse elemento de contêiner pode ser, digamos, uma camada (div). Para transformar uma grande das imagens em seu plano de fundo, você precisa usar a descrição de estilo - o atributo de estilo da tag div. Um contêiner vazio no código HTML pode ter a seguinte aparência:
Entre parênteses, indique o endereço e o nome do arquivo de imagem de fundo em seu site.
Etapa 6
Crie uma tag de imagem de primeiro plano (img), usando o mesmo atributo de estilo para definir a quantidade de preenchimento das bordas do contêiner de fundo. Por exemplo:
Aqui, os atributos de largura e altura definem as dimensões da imagem, e os quatro números após o preenchimento indicam o preenchimento em pixels das bordas do contêiner, começando no topo (50) e ainda no sentido horário (60 - direita, 70 - inferior, 80 - esquerda).
Etapa 7
Coloque a tag img em um contêiner:
Etapa 8
Adicione as linhas criadas ao código-fonte da página e, a seguir, alterando os recuos, ajuste a posição da imagem inserida em relação ao fundo da imagem de fundo.
