无法将白色背景图像正确插入到 ul 导航栏中。插入后看不到白色背景的阴影和内发光效果。
What is seen after Insertion. (jpg background image)
What is seen after Insertion. (png background image)
下面是 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');
}
更新:我设法让它工作了一些，但在神秘的情况下。尺寸有点偏，它没有覆盖第一个图标。 Image
#navbar {
background:url('images/navbarw1.png');
position: absolute;
top: 300px;
left: 150px;
background-position: 50% 50%;
font-size: 26px;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
最佳答案
尝试将 ul 溢出设置为隐藏
ul{
overflow:hidden;
}
关于css - 为什么无法将此图像作为 <ul> 背景正确查看？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11572580/