镀铬的奇怪的盒子

Question

我试图将一个动画gif过jpg,它似乎在大多数浏览器(IE,火狐,iPhone,iPad的)工作,但周围有动画一个奇怪的箱子gif在Windows上的Chrome,火狐为Mac,和铬对于mac.

我终于通过一些奇怪的黑客来解决它,比如强迫图像调整到99.9%,使用掩码只允许动画gif的一部分显示,但是有更好/更清晰的跨浏览器解决方案吗？

我基本上开始使用div和图像,两者都是响应式的.
HTML:

<div>
    <img src="http://www.enjoyillinois.com/images/animations/Garden_of_Gods_anim_full.gif" />
</div>

CSS:

div {
    background-image: url("http://www.enjoyillinois.com/images/animations/Garden_of_Gods_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

img {
    width:100%;
    display:block;
}

这是一个jsfiddle:http://jsfiddle.net/GyDCx/7/

Answer 1

这是一个图像边缘缩放问题,我在这种情况下使用的解决方案是:

img{ image-rendering:-webkit-optimize-contrast; }

这会在缩放图像时禁用模糊边缘. http://jsfiddle.net/GyDCx/31/