在網(wǎng)頁(yè)設(shè)計(jì)中，按鈕是不可缺少的元素之一。按鈕的類型很多，其中圖片加文字的按鈕是非常常見(jiàn)的一種。本文將介紹如何使用 CSS 實(shí)現(xiàn)圖片加文字的按鈕。

首先，我們需要準(zhǔn)備一個(gè)圖片作為按鈕的背景。這里我們以一個(gè)add.png圖片為例：

<img src="add.png" alt="add" id="btn">

然后，在 CSS 文件中，我們?yōu)閳D片設(shè)置寬度和高度，并將其作為背景圖片：

#btn {
width: 100px;
height: 40px;
background: url(add.png) no-repeat;
}

接下來(lái)，我們需要在按鈕上添加文字。這里我們簡(jiǎn)單地使用span標(biāo)簽，作為文字的容器：

<img src="add.png" alt="add" id="btn">
<span>Add</span>

然后，在 CSS 文件中，我們?yōu)槲淖衷O(shè)置樣式，例如顏色、字號(hào)、位置等：

#btn span {
color: #fff;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這里的position: absolute;和top: 50%; left: 50%;將文字居中顯示在按鈕上，而transform: translate(-50%, -50%);則讓文字向左上角偏移一定距離，以達(dá)到更加美觀的效果。

最后，我們?yōu)榘粹o添加懸停和點(diǎn)擊效果。這里我們使用:hover和:active偽類來(lái)實(shí)現(xiàn)：

#btn:hover {
opacity: 0.8;
}
#btn:active {
transform: scale(0.9);
}

這里的opacity: 0.8;將按鈕透明度降低到 80%，以達(dá)到懸停效果；transform: scale(0.9);則將按鈕縮小 10%，以達(dá)到點(diǎn)擊效果。

至此，我們就成功地實(shí)現(xiàn)了圖片加文字的按鈕。完整的代碼如下：

<style>
#btn {
width: 100px;
height: 40px;
background: url(add.png) no-repeat;
position: relative;
}
#btn span {
color: #fff;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#btn:hover {
opacity: 0.8;
}
#btn:active {
transform: scale(0.9);
}
</style>
<img src="add.png" alt="add" id="btn">
<span>Add</span>