Com a transição para o Windows 10 e a introdução do navegador Microsoft Edge, a popularidade do Internet Explorer começou a vacilar. O Mozilla Firefox e o Google Chrome são navegadores muito mais avançados e acompanham a introdução de novos elementos no campo CSS.
Por esse motivo, com base na experiência pessoal, achei difícil usar i fundos múltiplos ou fundos múltiplos. Na prática, é possível atribuir múltiplas imagens de fundo a cada elemento, obtendo-se uma imagem composta por múltiplos fundos. A propriedade background image apresentará caminhos de imagem separados por vírgula. Todas as outras propriedades relativas ao fundo: tamanho do fundo, fixação do fundo, repetição do fundo, podem ser utilizadas separando-as pelo sinal de vírgula e sempre com a mesma lógica: a primeira imagem representada, a da esquerda, refere-se ao primeiro andar da imagem.
Como aplicar duas imagens no fundo de um site com CSS
O que fiz para aplicar duas imagens no fundo do meu site foi intervir no CSS inserindo as seguintes linhas de código no corpo:
corpo {cor: # 333;
fundo: url (images / bk_body.png), url (“adv / skin-amazon.jpg”);
repetição de fundo: repetir-x, sem repetição;
posição de fundo: centro superior! importante;
anexo de plano de fundo: local, fixo! importante;
}
Testando essa implementação no meu código CSS de múltiplos fundos no Firefox, Chrome e Edge, o resultado foi ótimo, mas o maior problema foi com o Internet Explorer, que aparentemente não suporta múltiplos fundos. Ao definir o anexo de fundo como fixo em uma das duas imagens, o Internet Explorer também o aplica à outra imagem, que em vez disso é definida como Local, gerando assim a ilegibilidade dos artigos
Agora, como o navegador da Microsoft ainda é muito usado por proprietários de Windows XP, Vista, Windows 7 e Windows 8.1, pensei em encontrar uma solução.
O que fiz para que isso funcionasse bem foi remover o fundo múltiplo no CSS para usuários que navegam com o Internet Explorer. Na prática, desativei o plano de fundo múltiplo em todas as versões do Internet Explorer 6. 7, 8, 9, 10, 11 agindo apenas no anexo de plano de fundo:
corpo {cor: # 333;
fundo: url (images / bk_body.png), url (“adv / skin-amazon.jpg”);
repetição de fundo: repetir-x, sem repetição;
posição de fundo: centro superior! importante;
anexo de plano de fundo: local, fixo! importante;
anexo de plano de fundo: local9! importante; / * aplica-se a todos, ou seja, a partir de 8 e abaixo * /
* anexo de fundo: local; !importante; / * aplicam-se a ie 7 e abaixo * /
_background-attachment: local; !importante; / * aplica-se a ie 6 e abaixo * /}
/ * aplicado para problemas com o IE11 e versões anteriores * /
@media all e (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {background-attachment: local! important;}
}
Se você quiser aplicá-lo também ao Microsoft Edge, basta adicionar estas linhas de código em seu CSS:
@supports (-ms-accelerator: true) {
/ * Os estilos CSS do IE Edge 12+ vão aqui * /
}
A primeira solução é declarar regras CSS que só podem ser lidas pelo Internet Explorer. Por exemplo, um asterisco (*) antes da propriedade CSS ou um sublinhado (_) como você pode ver indicam as versões do Internet Explorer. O mesmo vale para adicionar 9 antes do ponto-e-vírgula, para indicar IE8 ou abaixo, e assim por diante. Por exemplo:
- IE8 ou abaixo: para escrever regras CSS especificamente para o IE8 ou abaixo, adicione uma barra invertida e 9 (9) ao final antes do ponto-e-vírgula.
- IE7 ou abaixo: Adicione um asterisco (*) antes da propriedade CSS.
- IE6: adicione um sublinhado (_) antes da propriedade.
.caixa {
Plano de fundo: cinza; / * padrão * /
Plano de fundo: rosa 9; / * IE 8 e posterior * /
* Fundo: verde; / * IE 7 e posterior * /
_background: blu; / * IE 6 * /
Lembre-se de que se você quiser agir no arquivo HTML dentro do HEAD, você tem outras soluções.
O comentário condicional do IE é provavelmente o mais usado para corrigir bugs do IE para versões específicas (IE6, IE7, IE8). Aqui estão alguns exemplos de código para alocar estilos a diferentes versões do Internet Explorer:
= IE8
= IE8 ou abaixo
= maior ou igual a IE8
/ * css para IE 8 * /
Outra solução é adicionar uma classe CSS que faça referência à versão do IE. Para especificar a versão do IE, use a classe do IE como o seletor pai e assim por diante:
Espero que esta solução possa ser útil e ajudá-lo.
Para saber mais sobre os caracteres especiais aplicados no CSS e que identificam as versões do IE, você pode dar uma olhada em:
Como criar uma folha de estilo apenas para IE
Happy Coding!
