Cela fonctionne bien pour les navigateurs prenant en charge Ceci doit être utilisé pour navigateur sans Taille de l'arrière-plan code>. Sinon, l'image 2x est zoomée. Taille de l'arrière-plan code> Support. P> .a {
background-image: url(img1x.jpg); /* 500x500 */
height: 500px;
width: 500px;
/* stop parsing this rule when background-size is not supported */
/* otherwise continue parsing and set different background-image */
background-size: 100%;
background-image: url(img2x.jpg); /* 1000x1000 */
}
3 Réponses :
Vous avez déjà mentionné Pour les navigateurs comme Chrome, vous pouvez analyser votre fichier CSS avec PHP et décider en fonction de l'agent utilisateur si le navigateur prend en charge ceci ou non.
Vous obtenez l'agent utilisateur dans PHP avec @supports . Vous pouvez définir imgx1.jpg par défaut et si arrière-plan est pris en charge, vous le définissez sur img2x.jpg
$ _ serveur ['http_user_agent']
Je ne comprendrais peut-être pas complètement quel est exactement le problème avec le manque de soutien de la propriété "Taille de fond", mais voici ma pensée:
Si vous souhaitez utiliser une image d'arrière-plan de double taille, c'est probablement ce qui est pour les affichages de haute densité (rétine). Si tel est le cas, j'essaierais de définir mon style de base avec l'image de fond unique et la «taille de fond», qui sera ignorée par les anciennes versions IE. Cependant, les navigateurs manipulant la requête de support de pixel-densité essaieront de rendre l'image de fond de double densité. J'espère que cela a du sens et c'est ce que vous cherchiez. Voici quelques idées plus belles sur CSS / JS Retina Dimensionnement des antécédents: http://coding.smashingmagazine.com/2012/08/20/Towards-retina-web/
C'est aussi, mais pas seulement, pour les appareils hauts DPI. Si je voulais juste que j'utiliserais -webkit-image-jeu à la place. Il s'avère que les images de la taille doubles hautement comprimées ont une taille de fichier plus petite et une meilleure qualité de meilleure qualité sur des périphériques DPI normaux. Donc, vous obtenez deux effets pour le prix d'un! :)
Cela semble très intéressant! Je vois comment il est très utile pour les navigateurs WebKit, mais cela ne résout pas le problème du navigateur croisé :(
Rayback CSS-Seulement pour L'astuce consiste à utiliser le style code> de la forme courte code> Pour définir les différentes propriétés d'arrière-plan, plutôt que d'utiliser les styles individuels tels que donc dans votre cas, Vous auriez quelque chose comme ceci: p> (le jusqu'à présent, tout ce que j'ai fait est de condenser votre code existant dans une seule ligne CSS à court terme, mais le bit intelligent est que nous l'avons fait maintenant, un navigateur qui ne reconnaît pas Cela signifie que nous pouvons spécifier un ensemble entièrement différent de valeurs d'arrière-plan pour les navigateurs plus anciens. P> Taille de l'arrière-plan code> est délicat, mais oui, il peut être fait. Taille de l'arrière-plan code>, arrière-fond-image code>, etc. p> 0% 0% code> est pour position d'arrière-plan code> (0% 0% est par défaut) qui est requis avant la valeur de la taille de l'arrière-plan code> lorsque vous utilisez le style de formulaire court). P> taille de fond code> jettera toute la ligne, plutôt que de jeter loin du Taille de l'arrière-plan code> seul. p> background: url(ie8bg.jpg); /* Shown by IE8 and other old browsers */
background: url(img2x.jpg) 0% 0%/100%; /* shown by new browsers with background-size support*/
Merci! Fonctionne très bien. J'étais brièvement inquiet que cela rendrait le navigateur télécharger les deux images si Taille de l'arrière-plan est pris en charge, mais ce n'est pas le cas.
Il suffit d'ajouter ceci pour référence. http://www.w3.org/tr/css3-background/# le fond
Stackoverflow.com/Questions/2991623/... < / a>
Que diriez-vous d'utiliser modernizr ?
@Vucko mordernizr est JavaScript.