图书合上时隐藏图书内容

Question

我目前正在为我正在创建的一个小型寻找游戏设置此设置：

http://jsfiddle.net/eju6S/

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

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

当封面打开时，它应该会显露出来。

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

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

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

这可能与css有关吗？

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

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

现在的问题是：我想在一页上有多个“翻书”，加载和使用如此巨大的图像会导致一些问题吗？还是没关系？

Answer 1

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

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