CSS中可以通過添加圖片來美化按鈕的樣式。以下是實現(xiàn)此功能的步驟:
/* 定義帶有圖片的按鈕 */ .button { background-image: url("button.png"); background-size: 100% 100%; /* 確保圖片占據(jù)整個按鈕 */ width: 100px; height: 50px; border: none; cursor: pointer; }
這段CSS代碼定義了一個類名為“button”的按鈕,其背景為名為“button.png”的圖片,圖片大小會根據(jù)按鈕大小自適應。該按鈕的寬度為100像素,高度為50像素,邊框為無,鼠標指針樣式為手形。
接著,在HTML中使用該類名即可創(chuàng)建帶有圖片的按鈕:
<button class="button">Click me!</button>
這段HTML代碼會創(chuàng)建一個帶有“Click me!”文本的按鈕,類名為“button”,應用了上面定義的CSS樣式。在瀏覽器中查看該按鈕,即可看到帶有圖片的效果。