你如何设置这个Javascript代码的背景图像的宽度？

的freezegframe.js插件由克里斯Antonellis让你基本上在鼠标悬停开始GIF动画。它有一些很好的东西，例如淡入淡出动画。这是所需的语法在插件踢：您设置你如何设置这个Javascript代码的背景图像的宽度？

<script type="text/javascript" src="freezeframe.js"></script> 
<script type="text/javascript"> 
freezeframe = new FreezeFrame(); 
</script>

在你的头文件，然后简单地说：

<img src="img/mr_div_retro_sphere.gif" freezeframe />

你的HTML体内。图像可以用

figure.freezeframe-container { 
    border-radius: 3px; 
    border-top: 1px solid __border__; 
    border-left: 1px solid __border__; 
    width: 100%; 
    margin: 0 auto; 
    -moz-box-shadow: 5px 5px 3px #888; 
    -webkit-box-shadow: 5px 5px 3px #888; 
    box-shadow: 5px 5px 3px #888; 
}

如文档中所示（请参阅原始链接）。问题是，目前没有办法设置背景图像的样式。请参阅测试示例here。

你可以从测试看，背景图像是使用原来的gif大小。但是，因为我希望网站在大小上具有弹性，那么我需要一种方法来确定初始图像的大小。

我已经联系了作者，但他解释说，困难是代码当前采用图片的第一帧---它似乎还不清楚如何将CSS样式命令附加到它。

来源

2013-03-22 TSGM

可以使用CSS3'背景尺寸：100％;'否则可能将图像添加作为固定一个''位置和绝对位置具有较高的z-index在顶部的内容。这样，你可以调整图片的大小 – Pete 2013-03-22 12:47:09

@peter：你的意思是背景大小：在freezeframe容器内的CSS 100％？我已经在测试网站上做到了这一点，但没有任何区别。至于你的其他建议，我认为这将涉及编写脚本来改变电影播放时的z索引，不是？有没有办法修改JS代码以包含背景的样式命令，而不是尝试替换它？毕竟，JS脚本的目的是让事情变得更美好（改变背景的不透明度以导入/导出视频）。 – TSGM 2013-03-22 14:54:06

我认为这将是背景：100％的.freezeframe容器 – Pete 2013-03-22 15:05:56

这是奇怪的，但哈克的方式，使它看起来体面的将是这样的：

.freezeframe-container { background-repeat: no-repeat; background-size: 78%; }

但它看起来像初始背景图像不匹配gif动画太清楚。

希望有所帮助。

来源

2013-03-22 15:43:00

不幸的是，这是行不通的。我相信背景元素实际上并不是您所看到的gif的固定（第一帧）。背景元素是一个灰色的加载屏幕。您建议的命令对观看者看到的第一个静态帧没有影响。 – TSGM 2013-03-22 16:04:12

我能够在我的检查员工作，这就是我对这些价值观的态度。您的CSS选择器可能必须更加权重（或内联）。 – 2013-03-22 16:12:10

奇怪。你在测试什么浏览器？您的命令似乎在Safari中运行（尽管背景重复对我没有影响），但在Firefox或Chrome中不起作用。我不是这种黑客的巨大粉丝，因为它需要你为每个单独的背景指定尺寸。嗯。 – TSGM 2013-03-22 16:44:13

你如何设置这个Javascript代码的背景图像的宽度？

回答

相关问题