javascript - 去除超大图像上的模糊

Question

我正在制作一英里高的意大利国旗，但我没有足够的磁盘空间来制作一英里高的具有正确纵横比的图像。为了解决这个问题，我决定制作一个超小(2 x 3 像素)的图像并将其显示在一英里高的网页中。唯一的问题是浏览器模糊了图像，但我希望它看起来像素化，以便它看起来像旗帜(旗帜只是 3 个大小相等的垂直条纹)。有没有办法来解决这个问题？该标志可用 here 。相关代码:

<img src=2-px-high-flag.png width=6842880 height=4561920>

编辑:我至少想让它与 chrome 兼容。其他其他浏览器也会有所帮助。

Answer 1

我会使用 html 来执行此操作，因为它会占用更少的内存并且不会抖动。

<div class="flag">
    <div class="green"></div>
    <div class="white"></div>
    <div class="red"></div>
</div>

.flag{
    width:6842880px;
    height:4561920px;
}
.flag div{
    float:left;
    width:33.3333333333333333333333%;
    height:100%;
}
.green{
    background:green;
}
.white{
    background:white;
}
.red{
    background:red;
}

http://jsfiddle.net/Q8y65/1/