去除超大图像上的模糊

Remove blur on oversized image

本文关键字：模糊 图像      更新时间：2023-09-26

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

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

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

我会用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/

尝试使图像6842880x1具有所需的颜色(每种颜色2 280 960像素(

我的建议是制作一个表格：

<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 s之间的任何空白。

相关文章：