CSS: фоновое изображение и дополнение

Я хочу добавить фоновое изображение с правой стороны элементов списка, и хочу иметь и прописку с правой стороны, но я не могу этого сделать. Посмотрите следующий пример:

HTML:

<ul>
    <li>Hello</li>
    <li>Hello world</li>
</ul>

CSS

ul{
    width:100px;  
}

ul li{
    border:1px solid orange;
    background: url("arrow1.gif") no-repeat center right;
}

ul li:hover{
     background:yellow url("arrow1.gif") no-repeat center right;
}

Я знаю, что мы можем установить положение изображения по пикселям, но поскольку каждый из них имеет разную ширину, я не могу этого сделать.

Здесь ссылка JSFiddle: http://jsfiddle.net/QeGAd/1/

Ответ 1

Вы можете использовать процентные значения:

background: yellow url("arrow1.gif") no-repeat 95% 50%;

Не идеальный пиксель, но...

Ответ 2

Вы можете уточнить следующее:

background-origin: content-box;

Это приведет к тому, что изображение будет соответствовать заполнению поля. http://www.w3schools.com/cssref/css3_pr_background-origin.asp

Ответ 3

Вы можете достичь своих результатов двумя способами: -

Первый метод определить значения позиции: -

HTML

 <ul>
 <li>Hello</li>
 <li>Hello world</li>
 </ul>

CSS

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}


ul li:hover{
    background: yellow url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}

Первая демонстрация: http://jsfiddle.net/QeGAd/18/

Второй метод по CSS : до: после Селекторы

HTML

<ul>
<li>Hello</li>
<li>Hello world</li>

CSS

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
}

ul li:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

ul li:hover {
    background:yellow;
}

ul li:hover:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

Вторая демонстрация: http://jsfiddle.net/QeGAd/17/

Ответ 4

Используйте background-position: calc(100% - 20px) center, для улучшения пикселя calc() - лучшее решение.

ul {
  width: 100px;
}
ul li {
  border: 1px solid orange;
  background: url("http://placehold.it/30x15") no-repeat calc(100% - 10px) center;
}
ul li:hover {
  background-position: calc(100% - 20px) center;
}

<ul>
  <li>Hello</li>
  <li>Hello world</li>
</ul>

Ответ 5

background-clip: content-box;

Фон будет окрашен в поле содержимого.

Ответ 6

Единственная опция для активации - это сделать пиксель идеальным, чтобы создать прозрачное дополнение в самом GIF. Таким образом, вы можете выровнять его справа от LI и по-прежнему иметь фоновое дополнение, которое вы ищете.

Ответ 7

настройка direction Свойство CSS для rtl должно работать с вами. Я думаю, он не поддерживается на IE6.

e.g

<ul style="direction:rtl;">
<li> item </li>
<li> item </li>
</ul>

Ответ 8

Вы можете просто добавить отступ к элементу блока путешествия и добавить стиль background-origin следующим образом:

.block {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  border:1px solid #e5e5e5;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-image: url(_your_image_);
  height: 14rem;
  width: 10rem;
}

Вы можете проверить несколько https://www.w3schools.com/cssref/css3_pr_background-origin.asp