按鈕是網頁設計中常用的元素之一，可以為網頁增添活力和美觀。在按鈕中添加圖片是一個常見需求，在本文中我們將介紹如何使用CSS樣式給按鈕添加圖片。 首先，在HTML中創(chuàng)建一個按鈕元素，如下所示：

<button class="button-with-image">按鈕</button>

然后，在CSS樣式中設置按鈕元素的寬度、高度、邊框、背景顏色等基本樣式，如下所示：

.button-with-image {
width: 100px;
height: 40px;
border: none;
background-color: #007bff;
}

接下來，我們要在按鈕中添加圖片。我們可以使用background-image屬性來指定要添加的圖片。例如，我們要在按鈕上顯示一個名為“play.png”的圖標，可以使用以下樣式：

.button-with-image {
background-image: url('play.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

在上面的樣式中，background-image屬性指定要添加的圖片，“url()”括號內的是圖片的URL地址。background-repeat屬性設置背景圖片是否平鋪，這里我們設置為不平鋪。“center”表示將背景圖像居中放置。“contain”表示背景圖片將縮放以適應按鈕的大小。 最終的CSS代碼如下所示：

.button-with-image {
width: 100px;
height: 40px;
border: none;
background-color: #007bff;
background-image: url('play.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

通過以上的代碼，我們可以在按鈕上添加圖片，并根據(jù)需要調整圖片的大小和位置。在實際應用中，我們可以根據(jù)具體的需求和設計的要求，設置不同的背景圖片和樣式，以實現(xiàn)美觀的按鈕效果。