Question

我的表单字段的第一个背景图片可以使用，但是提交按钮的第二个背景图片无效，＆amp;按钮正在使用字段的样式。

我的CSS是这样的：

form input {
    background: url("images/text-field1.png") no-repeat scroll -5px 0 transparent;
    font-size: 1em;
    height: 17px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    width: 311px;
    margin-bottom: 5px;
    margin-left: 40px;
}

form input .button1 {
    background: url("images/submitbutton.png") no-repeat scroll -5px 0 transparent;
}

button1是一个只对按钮设置样式的类，但由于某种原因它没有样式化。

Answer 1

尝试以下代码。

我已经给出了按钮类名mybtn并应用了背景图像样式。

HTML

<input type="submit" name="submit" class="mybtn"/>

CSS

input.mybtn {
    background-image: url("http://subtlepatterns.com/patterns/symphony.png");
    font-size: 12px;
    padding: 10px;
}

<强> JSFIDDLE DEMO

Answer 2

您需要添加!important

否则，在默认EMPTY !important属性上使用background-image的基类将覆盖您。

您将需要类似的东西

background-image: url("images/submitbutton.png") no-repeat scroll -5px 0 transparent  !important;

提交按钮的背景图像不工作

2 个答案: