菜单图标不显示

Question

我创建了一个导航菜单，我希望将所有内容设置为百分比，因为它应该是响应式的。看起来背景图像似乎没有显示图标，因为它是一个百分比？

Here is the fiddle link

这是图像类的直接css：

.account {
    background-image: url('https://jsfiddle.net/35xgfb9o/);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Answer 1

你在网址值的末尾忘了引用。

background-image: url('../images/http://www.psdgraphics.com/file/retro-tv-icon.jpg');

网址可能不包含../images

background-image: url('http://www.psdgraphics.com/file/retro-tv-icon.jpg');

最后一个问题是.icon的高度为零。显示背景但只是在这个高度（=你什么都看不见）。也添加图标高度。

.icon {height: 20px}

Answer 2

您必须在.icon元素上指定height 你忘了引用.account类

了

像这样：

.icon {
    text-align:center;
    width:50%;
    height: 25px;
}

Answer 3

工作小提琴 - https://jsfiddle.net/35xgfb9o/14/

<li class="icon account">
    <div ><p>My Account</p></div>
</li>

你有几个问题 来自错误的网址， 在网址末尾省略引用， 将你的类应用于空div - 如果div是空的，它没有维度，以便背景不会显示 - 你应该将你的类添加到你的li元素，或者如上面的答案所述，为你的{{1 } class