需要準備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html，編寫問題基礎代碼。

2、在index.html中的<button>標簽中，加入樣式代碼：style="background: url(small2.png);width:150px;height:60px"。

3、瀏覽器運行index.html頁面，此時按鈕被成功添加了圖片。

1.新建一個html文檔，在body中新建兩個div，一個是class屬性為aa的div，另一個是class屬性為bb的div。

2.在文件內，在兩個div內分別加上一個圖片標簽img，并且寫上兩個圖片的路徑

3.在html文件內，使用css對兩個div的樣式進行定義，分別設置其position屬性為absolute，即兩張圖片在頁面的位置是絕對定位

4.在html文件內，使用z-index設置兩張圖片的疊加的順序，設置圖片一在下面，圖片二在上面。

5.在html文件內，通過left和top分別設置div距離頁面左邊緣的距離和距離頁面上邊緣的位置，實現兩個圖片疊加。

6.在瀏覽器打開html文件，查看實現圖片疊加的效果。

第一種方式是image 作為背景圖片，即：background:url(".......");

例如如下代碼塊：

<div style="background:url('loading.gif') no-repeat;width:100px;height:50px">添加文字...添加文字...添加文字...</div>

第二種方式是將img塊與文字塊（文字塊采用span標簽顯示）放在同一個div 中，然后設置他們之間的位置，例如如下代碼塊：

<div style="position: relative; width: 170px; height: 89px;">

< img src="loading.gif" width="170" height="89" alt="">

<span style="position: absolute; top: 0; left: 0;">添加文字...添加文字...添加文字...</span>

</div>

第三種方式是將img塊與文字塊（文本塊存放在div中）放在同一個div 中，然后設置他們之間的位置，例如如下代碼塊：

<div style="position:relative;">

< img src="loading.gif" />

<div style="position:absolute; z-index:2; left:10px; top:10px">添加文字...添加文字...添加文字...</div>

</div>