Question

我在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 目标是获得一个不同的右角，但我尝试设置负距离不起作用。可以给我一个解释吗？更有意思的是，有人可以给我一个解决方法，解决课堂上的错误吗？

Answer 1

那是因为你设置了一个负距离，在第一个背景的中间给你一块。如果您使用像-250px这样的位置，您会更接近，但为了确保您必须在链接上设置固定宽度或使用所需背景位于右边缘的图像。

CSS中背景位置的正确距离

1 个答案: