JSF中的CSS精灵表动画

Question

我在jsfiddle中有这个精灵表动画示例 我尝试在JSF中完成这项工作。

我更改了CSS以正确加载图像：

background-image: url("#{resource['images:sprite.png']}");

并在JSF中：

<img src="#{resource['images/sprite.png']}" />
<div class="hi"></div>

但页面只显示sprite.png而不是动画。

使用Chorome Dev-Tools，它将div显示为0px height元素。当我更改设置时，它仍然没有出现......它们没有其他错误或警告。

更新： 渲染的HTML：

<img src="/t07/javax.faces.resource/images/sprite.png.jsf">
<div class="hi"></div>