我在 CMS 上工作，我想使用不同的按钮进行特殊编辑。 我创建了一个看起来像这样的小示例文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
/* --- "breadcrumbs" --- */
ul.path {margin:0;
padding:0;
padding-bottom:19px;
zoom:1;
overflow:hidden;}
ul.path li {list-style-type:none;
list-style-position:outside;
height:28px;
overflow:hidden;
float:left;
margin-right:2px;
font-size:85%;
padding-left:10px;
line-height:19px;
background:url(hor.png) no-repeat left -90px;}
ul.path li.cur {padding-left:10px;
background:url(hor.png) no-repeat left -60px;}
ul.path a {padding:0 15px 0 0;
overflow:hidden;
float:left;
font-weight:normal;
height:26px;
padding-top:2px;
color:#fff;
text-decoration:none;
background:url(hor.png) no-repeat right -90px;}
ul.path li.cur a {color:#FFF;
font-weight:bold;
background:url(hor.png) no-repeat -180px -60px;}
</style>
</head>
<body>
<ul class="path">
<li><a href="#">Webdevelopment</a></li>
<li><a href="#">programming</a></li>
<li><a href="#">database</a></li>
<li><a href="#">modeling</a></li>
<li class="cur"><a href="#">Dezign</a></li>
</ul>
</body>
</html>
我有一个 png 背景图像，看起来像这样 Background images with tiffrent right corners http://img10.imageshack.us/img10/1849/hor.png 结果如下所示: result http://img21.imageshack.us/img21/774/resultr.png 目标是获得不同的右 Angular ，但我尝试设置负距离的尝试不起作用。有人能给我解释一下吗？ 更有趣的是，有人能给我一个解决方法，解决 cur 类中的错误吗？
最佳答案
那是因为你设置了一个负距离，让你在第一个背景的中间有一 block 。如果您使用像 -250px 这样的位置，您会更接近，但要使其准确，您必须在链接上设置固定宽度或使用所需背景位于右边缘的图像。
关于html - CSS中背景位置的正确距离，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1550222/