背景图像图标未出现在 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

请试试这个：

我认为你的背景图片 url 不正确。

创建了一个 jsfiddle，它工作正常：

 ----      https://jsfiddle.net/Ljt1bt90/6/

Answer 2

当我将代码放入 JSFiddle 并更新路径时，我没有发现您的代码有任何问题。只要确保您的网络服务器上有图标即可。相对路径和绝对路径都有效（但只有绝对路径在带有其徽标的 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;
}

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

Background-Image Icon not appearing on HTML page

html

css

background-image