輸入提交按鈕的圖像背景和文本-CSS

Question

我正在嘗試為表單設置一個按鈕，該按鈕具有圖像背景並在背景頂部顯示文本。 看起來很簡單，但是無論經過什么小時的努力尋找一個類似問題的人，我都想盡一切努力使文本顯示出來，所以假設我做的很蠢！

這是我的CSS：

#detail-left .cart-button {
    background : url("../graphics/cart-button.png");
    border : none;
    color : transparent;
    height: 48px;
    width: 118px;
    padding: 10px;
    line-height: 48px;
}

和我的HTML：

<input class='cart-button' type='submit' value='Add' />

Answer 1

去除顏色：透明。 它使您的文本透明，使其具有某種顏色。

Answer 2

去除color : transparent; 從你的風格課，那應該工作

#detail-left .cart-button {
    background : url("../graphics/cart-button.png");
    border : none;
    height: 48px;
    width: 118px;
    padding: 10px;
    line-height: 48px;
}

試試這個工作的小提琴

Answer 3

“顏色：透明；” 設置將導致文本完全透明，如果您希望文本具有半透明性，請考慮使用rgba。