我正在尝试gif
在 a上放置动画jpg
,它似乎在大多数浏览器(IE、Firefox、iPhone、iPad)中都可以使用,但是在 windows 上gif
的chrome 中的动画周围有一个奇怪的框,适用于 mac 的 firefox和chrome对于 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/