输入提交按钮的图像背景和文本-CSS

Question

I'm trying to make a button for my form which has an image background and displays the text on top of the background. Seems very simple but I'm struggling to get the text to appear no matter what I try and struggling after an hour of searching to find someone with a similar problem so assume I'm doing something stupid!.

Here's my CSS:

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

and my html:

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

Answer 1

Remove color:transparent. Its making your text transparent give it some color.

Answer 2

Remove color : transparent; from your style class, That should work

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

Try this working fiddle

Answer 3

The "color : transparent;" setting will cause the text to be completely transparent, if you want the text to have half-transparency consider using rgba.