html - CSS 我做错了什么？无序列表中的背景图像

Question

.navbar {
    position:relative;
    height: 50px;
}
ul {
    height:inherit;
    position:absolute;
    top:19%;
}

ul li {
    height:inherit;
    padding: 10px 1px 10px 1px;
    display:inline;
    font-size:1.3125em; 
    transition: all 0.4s ease;
}

ul li:hover {
    background-color: #0E0E0E;
    background: url(img/a.svg) no-repeat;
    background-position: 0px 5px;


}

所以，基本上，我想将图像应用于突出显示的无序列表项，但该图像从未出现，这是怎么回事？

Answer 1

您的图片网址不正确。或者您有一些其他样式冲突，或者您的 CSS 与您的 HTML 不正确匹配。

请看这个 fiddle 。使用我期望的 HTML 结构，它可以很好地使用外部图像；

JS FIDDLE 1

如果您还想应用背景颜色以及图片，您需要将 CSS 更改为此；

ul li:hover {
    background-color: #0E0E0E;
    background-image: url(img/a.svg);
    background-repeat: no-repeat;
    background-position: 0px 5px;
}

JS FIDDLE 2