很簡單的，嗯，就是要做成這樣的：

用CSS，當然得用層了，就是在圖片上再加一個層，用來放那個按鈕，按鈕又有兩種方式可以放，一種是直接用圖片img標簽，一種是通過背景圖片放上去。這里我們就用背景圖片這個方式來做吧！

首先準備這樣兩張圖片：

寬19px，高32px

寬120px，高90px

我們想想：底部要放圖片，上面要放一個按鈕，貌似需要用到絕對定位，那我們需要為圖片再定義一個div樣式，用來放圖片和這個按鈕，我們可以這樣寫：

.expdiv{

padding:4px;

width:120px;

border:1px solid #c8c8c8;

}

剩下的就是關鍵的把按鈕放上去，在這里，按鈕是一個鏈接，我們可以設置鏈接的顯示方式為block，并設置其z-index值為2(只要比0大都可以)，設置其寬高分別為19px和16px(我們只需要顯示按鈕圖片的一半就可以了)，那代碼可以這么寫：

.expbtn{

position:absolute;

z-index:2;

margin:72px 0px 0px 99px;

}

.expbtn a{

display:block;

width:19px;

height:16px;

background:#fff;

background:url(../images/btn_playbg.gif);

}

.expbtn a:hover{

background:url(../images/btn_playbg.gif) left -16px;

}

那么，在網頁中的代碼就該這么寫了：

OK，就這樣，試試吧，嗯！

總結

以上是生活随笔為你收集整理的html 图片上放置按钮,用CSS在图片上再加一个小按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。