Vídeo: Curso de HTML #42 - Imagem de fundo com tamanho adaptável 2025
É possível combinar várias imagens em uma única imagem ao trabalhar com navegadores compatíveis com CSS3. Pelo menos uma das imagens deve ter regiões transparentes que permitem que a segunda imagem espida por trás dela. O procedimento a seguir modifica o exemplo SingleImage para conter duas imagens. A segunda imagem é fornecida com fonte para download como PawPrint. GIF.
No entanto, você pode substituir facilmente uma imagem do seu agrado (desde que a imagem tenha as regiões transparentes necessárias).
-
Abra o SingleImage. Arquivo CSS.
-
Modifique o estilo do corpo para que a propriedade de imagem de plano de fundo agora contenha duas imagens, como mostrado aqui.
corpo {background-image: url ("PawPrint. Gif"), url ("CuteCat. Jpg"); background-color: SaddleBrown; Cor: SeaGreen; font-size: x-large; text-shadow: 1px 1px Yellow;}Observe que as duas entradas de imagem são separadas por uma vírgula - muitas propriedades de entrada múltipla requerem vírgulas, mas esta é uma delas. A ordem em que as imagens aparecem também é importante. A imagem que contém a transparência deve aparecer primeiro porque aparece na parte superior da segunda imagem. Se você inverter as entradas, a imagem que não possui transparências estará no topo e você verá apenas uma imagem.
-
Salve o arquivo CSS como MulitpleImage. CSS.
-
Abra o SingleImage. Arquivo HTML.
-
Modifique as tags e para que pareçam assim:
Um fundo de imagem múltipla
-
Salve o arquivo HTML como MultipleImage. HTML.
-
Carregar a página MultipleImage.
Você vê o plano de fundo. Observe como a pata imprime a sobreposição da imagem original, mas não a ocultar completamente.
