Flag Sprites css library: почему это плохо?

Я хочу использовать много изображений флагов на веб-сайте без загрузки слишком тяжелых изображений, я нашел css-спрайт всех флагов https://www.flag-sprites.com/, кажется очень полезным, поэтому я пытаюсь его использовать, он работает частично, но он показывает уродливое img в хром и светлячок:Flag Sprites css library: почему это плохо?

у меня есть папка с моей index.html и фил из библиотеки flags.css и flags.png

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>test sprite flag</title> 
    <link rel="stylesheet" type="text/css" href="flags.css" /> 
</head> 
<body> 
    <img class="flag flag-cz" alt=" Tchèque" /> 
    <img src="blank.gif" class="flag flag-cz" alt=" Tchèque" />  
    Tchèque  
    <br/> 
     <img class="flag flag-zanzibar" alt=" zanzibar" /> 
    <img src="blank.gif" class="flag flag-zanzibar" alt=" zanzibar" /> 
    Zanzibar 
</body> 
</html>

Я хорошо сделать в IE, но

он визуализирует в Google Chrome таких как:

enter image description here

л делает еще хуже в светлячок:

enter image description here

источник

2015-07-14 Vivien Pipo

Нам бы нужен CSS, чтобы идти вместе с этим ..., вероятно, ссылку на изображение тоже. –

Как объясняет @Paulie_D, потребуется весь код, необходимый для репликации проблемы, чтобы дать вам руку. На первый взгляд, хотя похоже, что вы используете теги 'img' нечетным образом (например, атрибут' src' является обязательным https://developer.mozilla.org/en-US/docs/Web/HTML/ Элемент/IMG). –

Вам не нужно использовать <img> тег для спрайта. вы бы лучше сделать это следующим образом:

<div class="flag flag-cz"><div>

И в файле CSS:

.flag{ 
    background-image: url("Adress/the/flag/file.png"); 
    background-repeat: no-repeat; 
    width: 32px;  /* width of each country flag */ 
    height: 32px;  /* height of each country flag */ 
} 
.flag-cz{ 
    background-position: -32px -32px;  /* position of topmost leftmost pixel of Czech Republic flag in this example */ 
}

источник

2015-07-14 13:36:04 Trix

Flag Sprites css library: почему это плохо?

ответ

Смежные вопросы