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 { }

类。

如果您正确提供了路径，则您的代码应该可以正常工作。 看到这个小提琴：

http://jsfiddle.net/Qy2T2/

Answer 2

背景-简写属性

格式：

background: <color> url("<image path>") <repeat> <x> <y>;

例：

body { background: #FFFFFF url("MyImage.png") no-repeat right top; }

工作实例

确保检查图像路径。