Html 如何在顶部栏中实现CSS样式的标志？

所以我的网站应该是多语言的。要让用户在不同语言之间切换，下拉列表中将显示标志

为了更好地调整我的图像（旗帜）的大小，我想通过CSS单独创建它们。但是我没有做到这一点，所以我创建了小的1x3和3x1

.jpgs

文件，我想通过CSS调整大小

以下是我创建的两个示例：

（最有可能的情况是，你应该下载图片并将其放大，以了解我所做的事情。）

我的计划是使用像素化的图像渲染属性来获得无需任何平滑或颜色渐变的调整大小的图像，在我使用IE之前效果很好

我创建了一个小代码片段来重现基本思想：

.ger{
图像渲染：像素化；
背景图片：url(http://i.stack.imgur.com/tNV8n.jpg);
背景尺寸：1px45px；
背景重复：重复；
}
先生{
图像渲染：像素化；
背景图片：url(http://i.stack.imgur.com/ErVbV.jpg);
背景尺寸：120px 1px；
背景重复：重复；
}
#旗杆1，#旗杆2{
宽度：120px；
高度：45px；
}

第一个代码段的问题是，在代码段的CSS部分中有

标记，这把它搞砸了

.ger{
图像渲染：像素化；
背景图片：url(http://i.stack.imgur.com/tNV8n.jpg);
背景尺寸：1px45px；
背景重复：重复；
}
先生{
图像渲染：像素化；
背景图片：url(http://i.stack.imgur.com/ErVbV.jpg);
背景尺寸：120px 1px；
背景重复：重复；
}
#标志1，
#旗子2{
宽度：120px；
高度：45px；
}

您为什么不使用svg图像作为标志？这似乎可以解决您的渲染问题…缩放并不是您可以依赖的一致结果。一些浏览器将像素化，其他浏览器将平滑处理。许多旗帜肯定不仅仅是一堆彩色的长方形。您可能最好使用sprite，或者更好的是使用SVG。@jcaron我知道有些标志不能与该方法一起使用。但是我需要它们。@mzmm56原因是我不知道它们，我将深入探讨该主题并再次作出回应。@oRookie如果您还没有遇到它，这看起来很好，谢谢我更正了该主题。我用记事本++写了下来，没有分开我的html和css文件，我想我昨天太累了，，，不过再次感谢。