Как переместить только часть изображения с парением

Question

У меня есть одно изображение, которое содержит несколько слов, когда такое слово, как «хорошо» или никогда не витает, я хочу переместить его.

Для одного изображения я знаю, как это сделать:

#imgHover:hover { margin-top: -5px; }
<img id="imgHover" src="http://www.phrases.org.uk/images/most-common-words-in-english-proverbs-1.gif"/>

Но я хочу переместить только определенные слова, такие как «хорошо».

Возможно ли это в CSS?

Спасибо!...

Answer 1

Нет, это невозможно. Вы не можете использовать CSS, чтобы отделить части изображения друг от друга.

Возможно, вам лучше использовать отдельные изображения или устанавливать текст в HTML. С текстом HTML вы можете сделать что-то вроде этого, например, вот так:

<span class="word">Hi this is <span class="move">good</span></span>

, а затем

span.word span.move:hover { position: relative; top: -15px }

Answer 2

Проще говоря ... нет, если слова на одном изображении.Сделайте отдельные изображения для каждого слова.

Answer 3

Использование CSS-спрайтов, вероятно, решит вашу проблему: http://css -tricks.com / css-sprites /

Answer 4

Вам нужно будет использовать изображение в качестве фона элемента и изменить положение фона:

#img
{
  background:url("img.png") no-repeat 0 0;
  width:123px;
  height:10px;
}

#img:hover
{
  background-position:0 -5px;
}

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

<div id="img"></div>

Наведите указатель мыши на элемент divпереместит фон на 5 пикселей.Обратите внимание, что вам необходимо учитывать размеры.