Question

我正在尝试将动画gif放在jpg上，它似乎适用于大多数浏览器（IE，Firefox，iPhone，iPad），但周围有一个奇怪的框动画gif在 Chrome on windows ， firefox for the mac ， chrome for the 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/

Answer 2

您可以尝试：

-webkit-transform: translateZ( 0px );

这会将其修复为Chrome。

请参阅：http://jsfiddle.net/PvnmK/7/

PS1：也在safari和firefox上测试过。

镀铬的奇怪的盒子

2 个答案: