Question

我做错了什么？根本没有图片出现。： - /（fyi我切断了代码的底部，标签都完成了我保证）

在我看过的所有教程中，他们做了这件事，它展示了整个画面。但是，当我这样做时，它并没有显示任何东西。如果我在一个href标签内键入文本，它会显示文本后面的部分图片，但没有其他内容。

CSS：

body {
    background-color: #ebf4f7;
    background-image: url(bg.png);
    background-repeat: repeat-x;
}
#mainnav {
    position: relative;
    top: -9px;
    left: -2px;
    width: auto;
    padding-right: 0%;
    padding-left: 0%;
}
   .profilebutton {
    background-image: url(button%20profile.png);
    background-position: 0px 0px;
    height: 71px;
    width: 113px;
}
.profilebutton:hover {
    background-image: url(button%20profile.png);
    background-position: 0px 100%;
    height: 71px;
    width: 113px;
}

HTML：

<nav id="mainnav"> 
    <a href="my_profile.html" class="profilebutton"></a>

Answer 1

<a>是一个内联元素，因此如果您不打算添加任何文字，则必须将属性display: block;提供给<a>元素：Fiddle < / p>

.profilebutton {
    display:block;
    background-image: url('http://placekitten.com/300/303');
    background-position: 0px 100%;
    height: 71px;
    width: 113px;
}

body {
    background-color: #ebf4f7;
    background-image: url('http://placekitten.com/300/301');
    background-repeat: repeat-x;
}
#mainnav {
    position: relative;
    top: -9px;
    left: -2px;
    width: auto;
    padding-right: 0%;
    padding-left: 0%;
}
.profilebutton {
    display:block;
    background-image: url('http://placekitten.com/300/302');
    background-position: 0px 0px;
    height: 71px;
    width: 113px;
}
.profilebutton:hover {
    display:block;
    background-image: url('http://placekitten.com/300/303');
    background-position: 0px 100%;
    height: 71px;
    width: 113px;
}

<nav id="mainnav">
<a href="my_profile.html" class="profilebutton">nbvnbvnchdfg</a>

：悬停图片交换不起作用

1 个答案: