提交到达没有图片

Question

这样我必须在提交按钮上有一张图片，但它根本没有出现在它上面。

我希望它像这样：

现在看到我这样，我无法理解为什么它没有出现在页面上。

HTML

<div id="sogbar">
<input type="submit" name="sognu" class="sognu">
<div class="cl"></div>
</div>

CSS

#sognu {
    background: url('/img/sogindhold/sognu.png') no-repeat;
    float: right;
    background: -moz-linear-gradient(#e4d24a,#dec83d);
    background: -webkit-linear-gradient(#e4d24a,#dec83d);
    background: -o-linear-gradient(#e4d24a,#dec83d);
    background: -ms-linear-gradient(#e4d24a,#dec83d);
    background: linear-gradient(#e4d24a,#dec83d);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.5);
    border: 1px solid #2a2c0f;
    border-radius: 5px;
    height: 35px;
    width: 75px;
    position: relative;
    cursor: pointer;
}
#sognu:after {
    display: block;
    position: absolute;
    content: '';
    width: 16px;
    height: 16px;
    right: 0;
    left: 0;
    top: 14px;
    bottom: 0;
    margin: 0 auto;
}

Answer 1

我不确定你是如何尝试实现这个，但是如果你想在#sognu元素上显示图标。

似乎您的目标是错误的元素，如果要将这些声明应用于input元素，则应使用前导句点.按类名选择元素。

即。将#sognu更改为.sognu

然后您可以为background属性使用多个值，如下所示：

.sognu {
    float: right;
    background: url('/img/sogindhold/sognu.png') 50% 50% no-repeat, -moz-linear-gradient(#e4d24a,#dec83d);
    background: url('/img/sogindhold/sognu.png') 50% 50% no-repeat, -webkit-linear-gradient(#e4d24a,#dec83d);
    background: url('/img/sogindhold/sognu.png') 50% 50% no-repeat, -o-linear-gradient(#e4d24a,#dec83d);
    background: url('/img/sogindhold/sognu.png') 50% 50% no-repeat, -ms-linear-gradient(#e4d24a,#dec83d);
    background: url('/img/sogindhold/sognu.png') 50% 50% no-repeat, linear-gradient(#e4d24a,#dec83d);

    box-shadow: inset 0 1px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.5);
    border: 1px solid #2a2c0f;
    border-radius: 5px;
    height: 35px;
    width: 75px;
    position: relative;
    cursor: pointer;
}

Answer 2

您在css样式中使用了ID #sognu，但在HTML中您调用了类.sognu。