html - 背景图像图标未出现在 HTML 页面上

Question

我正在尝试将图标添加到按钮，但由于某种原因它不起作用。另一个具有类似代码的网页确实有效。我将该页面的 url 图片插入我的页面，但它不起作用。

我使用了 W3C CSS 验证器工具，它没有显示任何与该部分直接相关的错误。我使用 jsfiddle 查看问题是否仍然存在，使用一些在线图标字体库，但它仍然没有工作。

这是CSS:

.registration-buttons {
    float:none;
    width:100%;
    max-width:275px;
    height:40px;
    display:block;
    background:rgb(0,121,192);
    color: white !important;
    font: 16px/40px "Rockwell W01","Rockwell",Georgia,Courier,serif !important;
    -moz-box-sizing: border-box;
    padding-left: 70px;
    margin-bottom: 1%;
}
    .registration-buttons:hover {
        background:rgb(0,152,242);
    }

#StartTeamBTN {
    background-image:url(../custom/SLOPES_BC/images/gui/start-team-icon.jpg);
    background-repeat:no-repeat;
}
#JoinTeamBTN {
    background-image:url(../custom/SLOPES_BC/images/gui/join-team-icon.jpg);
    background-repeat:no-repeat;
}

#RegisterIndividualBTN {
    background-image:url(../mResponsive/images/register-individual-icon.jpg);
    background-repeat:no-repeat;
}

和 HTML:

<h1>Register</h1>
<p><strong>Select one of the below options to Start a Team, Join a Team, or Register as an Individual. </strong></p>
<p>

<a class="registration-buttons" id="RegisterIndividualBTN" href="">Register as an Individual</a>

<a class="registration-buttons" id="StartTeamBTN" href="">
Start a Team</a>

<a class="registration-buttons" id="JoinTeamBTN" href="">Join a Team</a>

</p>

如果重要的话，href 会在我实际的 css 文档中填写。

现在，我知道代码的工作基于我能够更改 ID #RegisterIndividualBTN 中的颜色，所以它调用正确，我只是不明白为什么图标不出现在按钮旁边的 html 页面中。

Answer 1

当我将代码放入 JSFiddle 并更新路径时，我没有发现您的代码有任何问题。只要确保您的网络服务器上有图标即可。相对路径和绝对路径都有效(但只有绝对路径在带有其 Logo 的 jsfiddle 上有效)。看我的jsfiddle .

我唯一改变的是 CSS 中的这些 URL 路径:

#StartTeamBTN {
    background-image:url(https://jsfiddle.net/img/logo@2x.png);
    background-repeat:no-repeat;
}

#JoinTeamBTN {
    background-image:url(https://jsfiddle.net/img/logo@2x.png);
    background-repeat:no-repeat;
}

#RegisterIndividualBTN {
    background-image:url(https://jsfiddle.net/img/logo@2x.png);
    background-repeat:no-repeat;
}