在網(wǎng)頁(yè)設(shè)計(jì)過程中，按鈕是一個(gè)非常重要的元素。有時(shí)候我們希望給按鈕添加一些特別的圖片樣式，這就需要用到CSS的background-image屬性。下面就來介紹一下如何在CSS中添加按鈕的背景圖片。

.button {
background-image: url("button.png");
background-size: cover;
padding: 10px 20px;
border: none;
color: #fff;
text-align: center;
cursor: pointer;
}
.button:hover {
background-image: url("button-hover.png");
}

以上是一個(gè)非常基本的按鈕圖片樣式，下面逐個(gè)解釋一下這些CSS屬性的含義。

首先是background-image屬性，它定義背景圖像的URL。路徑可以是相對(duì)路徑或絕對(duì)路徑，這取決于圖像文件存放的位置。我們使用url()函數(shù)將圖片鏈接到按鈕上。

我們使用了background-size屬性來讓圖片填充按鈕的整個(gè)區(qū)域。cover是一個(gè)CSS關(guān)鍵字，它會(huì)讓背景圖片自適應(yīng)按鈕大小，并且保持寬高比例。如果圖片大小與按鈕大小不匹配，就可以使用background-position屬性來控制圖片在按鈕內(nèi)部的位置。

padding、border和color屬性要根據(jù)具體情況進(jìn)行調(diào)整，以使按鈕與網(wǎng)頁(yè)的其他元素相協(xié)調(diào)。

最后是hover偽類。當(dāng)鼠標(biāo)懸浮在按鈕上時(shí)，我們可以使用:hover偽類改變按鈕的樣式。例如，我們可以在按鈕上添加一個(gè)不同的圖片，顯示出一個(gè)更加醒目的狀態(tài)。

通過以上代碼，我們就可以輕松地為網(wǎng)頁(yè)添加漂亮的按鈕效果了。