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/

Answer 2

尝试使用所需颜色制作图像6842880x1（每种颜色2 280 960像素）

Answer 3

我的建议是制作一张桌子：

<table>
  <tr>
    <td id="green" class="flag"></td>
    <td id="white" class="flag"></td>
    <td id="red" class="flag"></td>
  </tr>
</table>

然后，使用样式对象将flag类格式化为适当的大小，并将每个颜色ID格式化为正确的颜色。

<style>
  .flag {width:2280960px; height:4561920px}
  /*change colors to real Italian flag colors*/
  #red {background-color:#ff0000}
  #white {background-color:#ffffff} 
  #green {background-color:#00ff00}
</style>

对我来说看起来很好，没有渐变。可能需要一些校准或CSS来删除不同标志div之间的任何空格。

消除超大图像上的模糊

3 个答案: