0

我想要达到的目标。

白色背景图像无法正确插入ul导航栏。插入后看不到白色背景的投影和内发光效果。

插入后看到的内容。（jpg背景图片）

插入后看到的内容。（png背景图片）

下面是 HTML 和 CSS。

<html>
    <head>
        <meta charset="UTF-8"/>
        <title> Foodstant Delivery </title>
        <link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
        <link rel="shortcut icon" href="images/favicon.ico" />
    </head>

<body>
    <div id="container">

    <div id="navbar">
            <ul>
                <li class="OP"><a  href="Orders.html">Your Order</a></li>
                <li class="MP"><a  href="Menu.html">Menu</a></li>
                <li class="CUP"><a  href="ContactUs.html">Contact Us</a></li>
                <li class="JP"><a  href="Jobs.html" target="_blank">Jobs</a></li>
                <li class="TCP"><a  href="TC.html">Terms & Conditions</a></li>
            </ul>   
        </div>
    </div>

</body> 

</html>

CSS：

* {
    margin: 0;
    padding:0;
}

#navbar {
    background:url('images/navbarbg1.jpg');
    position: absolute;
    top: 300px;
    left: 150px;
    font-size: 26px;
}

#navbar ul li {     
        float:left;
        padding:0 60px 0 0; 
        list-style-type:disc;
        }

#navbar ul li.OP {
        list-style-image:url('images/order.png');
}   

#navbar ul li.MP {
        list-style-image:url('images/menulogo2.png');
}

#navbar ul li.CUP {
        list-style-image:url('images/contact.png');
}

#navbar ul li.JP {
        list-style-image:url('images/Pen.png');
}

#navbar ul li.TCP {
        list-style-image:url('images/pin.png');
}

更新：我设法让它在某种程度上工作，但在神秘的情况下。尺寸有点偏，并且不包括第一个图标。 图片

#navbar {
    background:url('images/navbarw1.png');
    position: absolute;
    top: 300px;
    left: 150px;


    background-position: 50% 50%;
    font-size: 26px;
    font-family: 'Conv_LITHOSPRO-REGULAR';


}
4

3 回答 3

0

尝试将ul溢出设置为隐藏

ul{
    overflow:hidden;
}
于 2012-07-20T04:56:02.040 回答
0

“#navbar”没有设置任何尺寸，它包含一个ul包含浮动元素的元素，这些元素可能不是“包含”的，这可能意味着“#navbar”没有出现。由于您使用的背景在高度维度中不重复，因此建议无论如何设置该维度。

编辑：我也同意 pcridesagain （但可能不完全是），原因是您仍在使用 li 作为列表项。使它们“显示：块；”，将图像显示为位于左侧和中心（垂直）的背景（非重复）图像，为 lis 和左侧填充提供足够的行高，这也是我经常使用的。同样通过这种安排，您可以更准确地定位背景，而您不使用列表项图像。但是我可以理解为什么您可能希望将它们用作列表项图像，因为有时这样做可能会有点痛苦，因为您拥有所有的保真度。

于 2012-07-20T04:04:36.113 回答
0

有两件事要尝试，而不是选择带有背景图像的 div #navbar，而是选择ul带有#navbar ul{...}. 它不覆盖第一个图标的原因是因为您需要将 设置list-style-type为none. 去掉list-style-type并使用backgroundiimage+padding-left来li创建图标。

于 2012-07-20T05:49:38.550 回答