Retina Sprite Symbol Problem

Ich habe ein Problem mit meinem Sprachumschalter Retina Sprite-Symbol. seit ich eine: before-Anweisung für meine Sprachumschaltung habe und ich Sprite-Symbol-Stil dort angewendet habe. Ich brauche deine Hilfe, um es für 2x Gerät Pixelverhältnis (Retina) einzustellen. hier ist der Code:Retina Sprite Symbol Problem

.l-header #nav > div.v-menu::before { 
content: ""; 
display: block; 
position: absolute; 
height: 23px; 
width: 23px; 
background-position: 0 -1993px; 
left: 20px; 
top: 16px; 
top: 50%; 
left: 50%; 
-moz-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%); 
-webkit-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%); 
background-image: url('../img/sprite-icons-sf04c977769.png'); 
background-repeat: no-repeat; 
} 





@media only screen and (-webkit-min-device-pixel-ratio: 2.0), 
    only screen and (min--moz-device-pixel-ratio: 2.0), 
    only screen and (-o-min-device-pixel-ratio: 200/100), 
    only screen and (min-device-pixel-ratio: 2.0) { 
     .l-header #nav > div.v-menu::before { 
      background-image:url('../img/[email protected]'); 
      -webkit-background-size: 0px -3986px; 
      -moz-background-size: 0px -3986px; 
      background-position: 0px -3986px; 
     } 
    }

ich eigentlich auch 2x Sprite-Bild haben ('../img/[email protected]').

Website URL: mywebsite

Danke.

Quelle

2017-12-24 Kiarash

Haben Sie versucht, '@media (min-Auflösung: ...)'? –

Ja, ich habe das schon gelesen [https://stackoverflow.com/questions/15398038/retina-sprite-css-not-working] und habe versucht, diese Medienabfrage-Stile zu verwenden, aber es hat nicht funktioniert. – Kiarash

Können Sie dann den vollständigen Code einschließlich der Medienabfrage posten, so dass jemand einen Blick darauf werfen kann, was damit nicht stimmt. –

Wenn, wie in Ihrem Fall, die beiden Hintergrundbilder die richtigen Größen haben und die Sprites an den richtigen Stellen in den Bildern sind, müssen Sie die Hintergrundposition nicht erneut berechnen automatisch erfolgen.

Alles, was Sie tun müssen, ist die Hintergrundposition und die Hintergrundgröße des kleineren Bildes anzugeben.

.l-header #nav > div.v-menu { 
 
    position: relative; 
 
    margin-left:auto; 
 
    width:30px; height:30px; 
 
} 
 

 
.l-header #nav>div.v-menu::before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    height: 23px; 
 
    width: 23px; 
 
    background-position: 0 -1993px; 
 
    left: 20px; 
 
    top: 16px; 
 
    top: 50%; 
 
    left: 50%; 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    background-image: url('http://faradid-honar.com/wp-content/themes/faradid/assets/img/sprite-icons-sf04c977769.png'); 
 
    background-repeat: no-repeat; 
 
    background-size: 71px 2157px; /* this is new */ 
 
} 
 

 
@media only screen and (-webkit-min-device-pixel-ratio: 2.0), 
 
only screen and (min--moz-device-pixel-ratio: 2.0), 
 
only screen and (-o-min-device-pixel-ratio: 200/100), 
 
only screen and (min-device-pixel-ratio: 2.0) { 
 
    .l-header #nav>div.v-menu::before { 
 
    background-image: url('http://faradid-honar.com/wp-content/themes/faradid/assets/img/[email protected]'); 
 
    /* all other properties can remain as they were */ 
 
    } 
 
}

<div class="l-header"> 
 
    <div id="nav"> 
 
    <div class="v-menu"> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-12-26 19:54:03

Danke Mann. Es hat gut funktioniert. – Kiarash

Retina Sprite Symbol Problem

Antwort

Verwandte Themen