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不匹配。

看到这个小提琴。使用我期望的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

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

1 个答案: