html - CSS 背景图像不起作用

Question

我在可视化(在所有浏览器中)我在 CSS 中使用的背景图像时遇到问题:

HTML:

<div class="container">
    <div class="row" style="margin-top:-5px;">
        <div class="col-xs-1"></div>
        <div class="col-xs-10">
            <div class="box1" style="width:311px; float:left;">
                <div class="markermenu">
                    <ul>
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                        <li><a href="#">Four</a></li>
                        <li><a href="#">Five</a></li>
                    </ul>
                </div> 
            </div>

CSS:

.markermenu{
    width: 311px; /*width of menu*/
}

.markermenu ul{
    list-style-type: none;
    margin: 1px 0;
    padding: 0;
    border: 1px solid #9A9A9A;
}

.markermenu ul li a{
    background:url(img/lens.png) no-repeat 2px center;
    height:79px;
    color: #00014e;
    display: block;
    width: auto;
    padding: 30px 0;
    padding-left: 90px;
    text-decoration: none;
    border-bottom: 1px solid #B5B5B5;
}

* html .markermenu ul li a{ 
    width: 150px;
}

.markermenu ul li a:visited, .markermenu ul li a:active{
    color: #00014e;
}

.markermenu ul li a:hover{
    color: black;
    background-color: #ffffcb;
    background-image:url(img/icon/arrow.png); 
    z-index:10;/*onMouseover image change. Remove if none*/
}

问题是我在背景上看不到图像...有人知道为什么...？非常感谢。

已解决。谢谢!!!另一个问题...如果我不会为菜单的每个声音(正常和悬停)使用不同的图像并且如果我不会为每个声音使用两个图像，我必须如何修改 html 和 css？？？非常感谢

Answer 1

您必须检查

中背景图像的路径

.markermenu ul li a { }

和

.markermenu ul li a: hover { }

类。

如果您提供的路径正确，那么您的代码应该可以正常工作。看到这个 fiddle :

http://jsfiddle.net/Qy2T2/