html - 提交 到达 根本没有图片

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;
}