Chrome动画GIF背景图像没有播放 - 背景大小
问题描述:
我试图显示带有动画GIF作为背景图像的缩略图按钮。但只有在铬,gif不循环。Chrome动画GIF背景图像没有播放 - 背景大小
FF和Edge工作正常吗?
在Chrome开发工具中使用背景大小播放时,gif开始以特定百分比循环。
HTML
<span class="thumbnail"></span>
CSS
.thumbnail {
background-position: -12px -14px;
background-size: 150%;
background-color: rgb(250, 252, 252);
background-image: url(https://media.giphy.com/media/xTiTnxd70rHICWIQSs/giphy.gif);
...
}
我创建了一个jsfiddle,借以说明问题。
如果您使用不同的背景大小创建第二个缩略图,那么这两个缩略图都有一个循环gif!
有谁知道为什么?有没有问题的CSS?或者这是Chrome中的错误?
答
您可以使用以下代码实现相同的功能。在Chrome,FF和IE
其工作细CSS
.thumbnail {
background-position: -12px -14px;
background-size: 150%;
background-color: rgb(250, 252, 252);
border-radius: 50%;
border: 2px solid rgb(116, 200, 184);
box-sizing: border-box;
color: rgb(83, 181, 161);
cursor: auto;
display: block;
filter: none;
font-family: Ubuntu, sans-serif;
font-size: 14px;
height: 142px;
line-height: 20px;
margin: 12px;
max-width: 100%;
opacity: 0.5;
overflow-x: hidden;
overflow-y: hidden;
padding: 5px;
position: relative;
width: 142px;
}
HTML:
<span><img class="thumbnail" src="https://media.giphy.com/media/xTiTnxd70rHICWIQSs/giphy.gif"></span>
+0
在你的小提琴背景不是一个动画gif ... – Luciano
答
在这种特殊情况下修复的bug:
background-position: center;
几天前,当背景GIF停止在Chrome中工作时,我面临类似的问题,这似乎是Chrome的问题。
看起来他们已经在this release中对背景渲染进行了很多更改。
这似乎很好,如果你删除背景 - **位置**改变。然后再次,如果位置变化是在%而不是px,再次,这很好 - https://jsfiddle.net/hL2boada/12/ –
https://jsfiddle.net/hL2boada/14/ –
还有一个问题当仅使用'%'时! :(https://jsfiddle.net/tomvanrossom/hL2boada/15/ –