用图像覆盖div

Question

我正在写一个记忆游戏，比如concentration。使用jQuery，我如何覆盖广场但不丢失div内的内容？

Answer 1

http://jsfiddle.net/zZzWw/

<强>标记

<div class="card">
     <div>Some Text brah</div>
     <img src="http://www.zombiegames.net/inc/images/Flaming-Zombooka-2.gif"/>
</div>

<强> CSS

/* I set width and height to the same as the image */
.card{
     width: 70px;
     height: 70px;   
}

.card div{
     display:none;
}

<强> JS

$(function(){
    $('.card').click(function(){
       $(this).children('div').toggle();
       $(this).children('img').toggle(); 
    });
});

可以在用容器元素包装的2个元素之间切换。

Answer 2

尝试常规CSS。将图像放入div中，可见性：隐藏。使用javascript切换到可见性：可见。也许设置z-index。

Answer 3

使用CSS填充div，原始图像为背景。

然后更改CSS以获得新的背景图像。