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

Working Example

确保检查图像路径。

CSS背景图像不起作用

2 个答案:

背景 - 速记属性

格式：

实施例