在網頁設計中，圖片按鈕是非常常見的元素。但是，有時候我們需要在按鈕上加上一些文字提示，讓用戶更加明確地知道按鈕的作用。怎樣實現在圖片按鈕上加文字呢？這時候，我們就需要運用CSS技巧。

.btn {
position: relative; /*將btn設置為相對定位*/
display: inline-block; /*將btn設置為塊級元素*/
}
.btn img {
width: 100%; /*讓圖片按鈕充滿容器*/
height: auto; /*保持圖片的寬高比*/
}
.btn span {
position: absolute; /*將文本設置為絕對定位*/
top: 50%; /*將文本垂直居中*/
left: 50%; /*將文本水平居中*/
transform: translate(-50%, -50%); /*調整文本位置*/
font-size: 14px; /*設置文本大小*/
color: #fff; /*設置文本顏色*/
text-align: center; /*將文本居中*/
}

以上是一個實現圖片按鈕上加文字的CSS樣式。

按鈕文字

將上述CSS樣式加入到HTML代碼中，在button元素內放置一張圖片和一個span標簽，span標簽內是需要加入的文字。這樣就能實現圖片按鈕上加文字的效果了。