css - 图书合上时隐藏图书内容

Question

我目前将这个设置用于我正在创建的一个小游戏：

http://jsfiddle.net/eju6S/

我正在使用turn.js创建书籍效果。

现在我希望书的内容在书合上时不可见->封面应该与页面背景具有相同的背景。

当盖子打开时，它应该会显露出来。

这对颜色很容易，但我想有一张图片作为背景。

所以理想情况下，这条线<div class="hard"> Cover </div>应该忽略内容层，直接将背景显示为其背景。

我知道这可以通过在该区域剪切背景图像和该 div 的大小然后将其添加为背景或通过执行一些 jquery 函数来在封面关闭时隐藏内容但我正在寻找一个 css这里唯一的解决方案。

这可能与css有关吗？

编辑： 现在我通过简单地将相同的背景图像放入具有一些偏移量的 div 来实现我想要的：

http://jsfiddle.net/eju6S/3/

现在的问题是：我想在一页上有多个“翻书”，如果多次加载和使用如此巨大的图像会导致一些问题吗？或者这无关紧要吗？

Answer 1

如果您想隐藏封面上的文本或隐藏任何页面上的文本，请尝试使用负文本缩进

#hard { background: #2b2b2b; text-indent:-9999px; }