标记 Sprites css 库：为什么它呈现得很糟糕？

Question

我想在网站中使用很多旗帜图片而不加载太重的图片，我发现了一个 css 所有旗帜 https://www.flag-sprites.com/ 的 sprite，它看起来很有用所以我尝试使用它，它部分工作，但它在 chrome 和 firefox:

中显示丑陋的 img

我有一个文件夹，其中包含我的 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 中呈现为：

ir 在 firefox 中渲染更差：

Answer 1

您不需要为精灵使用 <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 */
}

标记 Sprites css 库：为什么它呈现得很糟糕？

Flag Sprites css library: why it renders badly?

html

css

css-sprites