用圖像覆蓋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以獲得新的背景圖像。