图像背景和文本输入提交按钮 - 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;
}

尝试这项工作fiddle

Answer 3

“颜色：透明;”设置将使文本完全透明，如果您希望文本具有半透明性，请考虑使用rgba。