Avec la transition vers Windows 10 et l'introduction du navigateur Microsoft Edge, la popularité d'Internet Explorer a commencé à faiblir. Mozilla Firefox et Google Chrome sont des navigateurs beaucoup plus avancés et suivent le rythme de l'introduction de nouveaux éléments dans le domaine CSS.
Pour cette raison, sur la base de mon expérience personnelle, j'ai trouvé qu'il était difficile d'utiliser i plusieurs arrière-plans ou plusieurs arrière-plans. En pratique, il est possible d'attribuer plusieurs images d'arrière-plan à chaque élément, obtenant ainsi une image constituée de plusieurs arrière-plans. La propriété background image présentera des chemins d'images séparés par une virgule. Toutes les autres propriétés concernant le fond : background-size, background attach, background-repeat, peuvent être utilisées en les séparant par la virgule et toujours avec la même logique : la première image représentée, celle de gauche, fait référence au premier étage de l'image.
Comment appliquer deux images en arrière-plan d'un site Web avec CSS
Ce que j'ai fait pour appliquer deux images en arrière plan de mon site a été d'intervenir dans le CSS en insérant les lignes de code suivantes dans le corps :
corps{couleur : #333 ;
arrière-plan : url(images/bk_body.png), url("adv/skin-amazon.jpg");
background-repeat: repeat-x, no-repeat;
background-position : en haut au centre !important;
background-attachment: local, fixed !important;
}
En testant cette implémentation sur mon code CSS à plusieurs arrière-plans sur Firefox, Chrome et Edge, le résultat était excellent, mais le plus gros problème était avec Internet Explorer, qui apparemment ne prend pas en charge plusieurs arrière-plans. En définissant le background-attachment sur fixé sur l'une des deux images, Internet Explorer l'applique également à l'autre image, qui à la place est définie sur Local, en cela il a généré l'illisibilité des articles
Maintenant, comme le navigateur de Microsoft est encore beaucoup utilisé par les propriétaires de Windows XP, Vista, Windows 7 et Windows 8.1, j'ai pensé trouver une solution.
Ce que j'ai fait pour que cela fonctionne bien, c'est de supprimer les multiples arrière-plans dans le CSS pour les utilisateurs naviguant avec Internet Explorer. En pratique j'ai désactivé le background multiple sur toutes les versions d'Internet Explorer 6. 7, 8, 9, 10, 11 en agissant uniquement sur le background-attachment :
corps{couleur : #333 ;
arrière-plan : url(images/bk_body.png), url("adv/skin-amazon.jpg");
background-repeat: repeat-x, no-repeat;
background-position : en haut au centre !important;
background-attachment: local, fixed !important;
pièce jointe d'arrière-plan : local9 !important ; /* s'applique à tous c'est-à-dire à partir de 8 et moins */
* pièce jointe d'arrière-plan : locale ; !important; /* s'applique à ie 7 et moins */
_background-attachment : local ; !important; /* s'applique à ie 6 et moins */}
/ * appliqué pour des problèmes avec IE11 et les versions antérieures * /
@media all et (-ms-high-contrast : aucun), (-ms-high-contrast : actif) {
body{background-attachment: local !important;}
}
Si vous souhaitez également l'appliquer à Microsoft Edge, ajoutez simplement ces lignes de code dans votre CSS :
@supports (-ms-accelerator:true) {
/* Les styles CSS IE Edge 12+ vont ici */
}
Cette première solution consiste à déclarer des règles CSS qui ne peuvent être lues que par Internet Explorer. Par exemple un astérisque (*) devant la propriété CSS ou un trait de soulignement (_) comme vous pouvez le voir indiquent les versions d'Internet Explorer. Il en va de même pour l'ajout de 9 avant le point-virgule, pour indiquer IE8 ou inférieur, et ainsi de suite. Par exemple:
- IE8 ou inférieur : pour écrire des règles CSS spécifiquement pour IE8 ou inférieur, ajoutez une barre oblique inverse et 9 (9) à la fin avant le point-virgule.
- IE7 ou inférieur : ajoutez un astérisque (*) avant la propriété CSS.
- IE6 : ajoutez un trait de soulignement (_) avant la propriété.
.boîte {
Fond : gris ; / * la norme * /
Fond : rose 9 ; / * IE 8 et versions ultérieures * /
* Fond : vert ; / * IE 7 et versions ultérieures * /
_fond : bleu ; / * IE 6 * /
N'oubliez pas que si vous souhaitez agir à la place dans le fichier HTML à l'intérieur du HEAD, vous avez d'autres solutions.
Le commentaire conditionnel d'IE est probablement le plus utilisé pour corriger les bogues d'IE pour des versions spécifiques (IE6, IE7, IE8). Voici quelques exemples de code pour allouer des styles à différentes versions d'Internet Explorer :
= IE8
= IE8 ou inférieur
= supérieur ou égal à IE8
/* css pour IE 8 */
Une autre solution consiste à ajouter une classe CSS qui référence la version IE. Pour spécifier la version IE, utilisez la classe IE comme sélecteur parent et ainsi de suite :
J'espère que cette solution vous sera utile et vous sera utile.
Pour en savoir plus sur les caractères spéciaux appliqués en CSS et qui identifient les versions d'IE, vous pouvez consulter :
Comment créer une feuille de style IE uniquement
Codage heureux!
