правильное расстояние background-position в CSS - PullRequest
Новая
       25

правильное расстояние background-position в CSS

1 голос
/ 11 октября 2009

Я работал на 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, которое выглядит следующим образом Фоновые изображения с разными правыми углами http://img10.imageshack.us/img10/1849/hor.png Результат выглядит так: результат http://img21.imageshack.us/img21/774/resultr.png Цель состоит в том, чтобы получить другой правильный угол, но мои попытки установить отрицательное расстояние не работают. Может ли Сомоне дать мне объяснение? И гораздо интереснее, может ли кто-нибудь дать мне обходной путь, который исправит ошибку в классе cur?

1 Ответ

1 голос
/ 11 октября 2009

Это потому, что вы устанавливаете отрицательное расстояние, которое дает вам фигуру в середине первого фона. Если вы используете положение, подобное -250px, вы приблизитесь, но чтобы получить точное значение, вы должны либо установить фиксированную ширину ссылки, либо использовать изображение, где желаемый фон находится на правом краю.

...