目标:在不超过容器宽度的悬停上显示带有动画的静态图像。
固定代码:
/* wrapper paragraph*/
.rimg {
text-align: center;
overflow: hidden;
}
/* rely on contents for vertical size, show backgrund centered */
.rimg-gif, .rimg-png {
display: block;
position: relative;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
line-height: 0;
}
/* containers need max-width in IE */
.rimg img, .rimg-gif, .rimg-png {
margin: 0;
max-width: 99.99999%; /* Opera Mini ignores anything above this % */
max-width: calc(100% - 0px); /* for proper browsers */
}
/* hide the GIF background unless hovered */
.rimg-gif:not(:hover) {
background-image: none !important;
}
/* hide the static image when hovered */
.rimg-gif:hover img {
opacity: 0;
}
<p class="rimg">
<span class="rimg-png" style="background-image:url(https://i.imgur.com/iwczbln.png)">
<a class="rimg-gif" target="_blank" href="https://i.imgur.com/TLxp2di.gif" style="background-image:url(https://i.imgur.com/TLxp2di.gif)">
<img src="https://i.imgur.com/iwczbln.png">
</a>
</span>
Description
</p>
最终结构:
.rimg
只是一个用于居中对齐的容器元素。img
是静态图像(用于语义、打印和默认显示)。它在悬停时通过不透明度隐藏,允许使用上下文菜单获取 GIF(“链接”)和静态 PNG(“图像地址”)的 URL。.rimg-gif
是悬停时显示的动画背景 GIF(同时隐藏静态图像)。它直到悬停才加载。兼作指向实际 GIF 的链接(适用于移动用户).rimg-png
有一个静态背景,只是为了让读者不会在 GIF 完成加载第一帧之前看到图像短暂闪烁。
这有一些问题:
在 IE<=11(非 Edge)中完全调整大小以适应宽度是行不通的 - 元素会溢出容器。向嵌套 block 添加“max-width: 100%”修复了此问题 (by this explanation)。
Opera Mini 同样不会调整图像大小以适应容器宽度,但上述针对 IE 的修复无效。我找不到对此的任何解释,但事实证明 Opera Mini 只是简单地忽略了大约等于 100% (>99.99999%) 的最大宽度值。所以我为 Opera 添加了它,为现代浏览器添加了
max-width: calc(100% - 0px)
。在 StackOverflow 的代码片段预览中,计算出的高度略高于图像的高度,这可以从它在底部短暂开始重复看到。通过将line-height: 0
提供给.rgif-alt
,问题就消失了,但我不确定这是否是 hack。编辑:显然是这样?其他选项包括 float 元素和使用 position: absolute,所以我猜 line-height 对元素来说很合适
其他详细信息:
- HTML 是从 markdown[-ish] 扩展生成的,因此它看起来是否令人讨厌并不重要。不过,我希望尽可能避免将图像尺寸/纵横比硬编码到生成的 HTML 中。
- 尝试在请求(鼠标悬停)之前不加载动画 GIF,因此 two-image trick是不可取的。
- 之所以避免使用 JS,是因为包含此类元素的页面可以在完全禁用 JS 的嵌入式浏览器中显示。可以想象,为每个动画打开一个弹出窗口(或默认浏览器的选项卡)是不可取的。
如果有任何不清楚的地方,请告诉。
最佳答案
经过一些尝试和错误后,我设法自己解决了问题,因此我在问题的解决方案和最终(工作)代码中添加了注释。
我对在 Android 上打开新标签页不是 100% 满意(理想情况下应该在单击时播放),但所有经过测试的浏览器在按下“返回”时都会关闭此类弹出标签页,所以也许还不错。 我添加了一个“播放”按钮,它还兼作移动设备的第一个触摸事件吸收器(最初完全覆盖链接,在短暂延迟后调整为 0% 宽度以允许单击链接)。这适用于现代浏览器(第一次点击触发悬停和动画播放,第二次点击打开链接)和 Opera Mini(它只打开带有 GIF 的弹出选项卡)。你可以在行动中看到这个 here ,例如。
关于css - 在 :hover 上显示带有 GIF 的无 JS 响应图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46995671/