CSS中的圖像按鈕(Image Button)可以為網頁增添美觀的呈現形式。本文將通過pre標簽展示實現這一特效的代碼,方便大家學習使用。
/* CSS代碼 */ .btn { display: inline-block; height: 50px; width: 150px; background-image: url("./btn.png"); /* 按鈕圖片的路徑 */ background-position: center; background-repeat: no-repeat; background-size: cover; color: #fff; /* 文字顏色 */ font-size: 18px; /* 文字大小 */ text-align: center; line-height: 50px; text-decoration: none; text-transform: uppercase; /* 文字大寫 */ cursor: pointer; /* 鼠標移入時的指針形狀 */ transition: background-color .5s ease-in-out; /* 背景色的動態效果 */ } .btn:hover { background-color: rgba(0,0,0,0.6); /* 鼠標移入時的背景色 */ }
以上代碼中,我們使用了CSS中的background-image屬性來給按鈕添加圖片,同時用了background-position、background-repeat和background-size屬性來控制圖片的顯示效果和大小。我們還設置了文字大小和顏色,以及將文字大寫并居中顯示。
此外,我們還為按鈕設置了鼠標移入時的指針形狀和背景色。用transition屬性實現背景色的動態效果,提升用戶體驗。以上代碼可以供大家學習使用,在實際項目中可根據需求進行修改。