замена якорного текста изображением

Question

Я хочу заменить якорный текст на изображение с помощью CSS. Вот мой код

HTML

<div id ="first">
<a href="#">Read More</a>
</div>

<div id ="second">
<a href="#">Read More</a>
</div>

CSS

#first #second a{
background:url(../images/layout/tab.png);
float:right;
}

Вот ссылка JsFiddle http://jsfiddle.net/chhantyal/GDF9K/

Почему это не работает? Какой правильный путь?

Answer 1

Ваш селектор не делает то, что вы ожидаете.Ваш текущий селектор соответствует этой структуре:

<div id="first">
  <div id="second">
    <a href="#">Hello</a>
  </div>
</div>

Вы должны быть многословны:

#first a, #second a {
  background:url(../images/layout/tab.png);
  float:right;
}

Демо: http://jsfiddle.net/GDF9K/2/

Но если с тех пор, как вы спросилидля правильного способа я предлагаю вам использовать класс:

<div id="first">
  <a class="foo" href="#">Read More</a>
</div>

<div id="second">
  <a class="foo" href="#">Read More</a>
</div>

И ваш CSS становится:

a.foo {
  background: url(../images/layout/tab.png);
  float: right;
}

Answer 2

используйте text-indent:-5000px в css

текст стреляет за пределы экрана, но фоновое изображение должно оставаться

Answer 3

Проверка обновлена ​​ Jsfiddle

#first,#second a{
    background:url(../images/layout/tab.png);
    float:right;
}

Для справки. Проверьте это

Answer 4

Попробуйте это

http://jsfiddle.net/GDF9K/4/

просто замените фоновую ссылку на вашу ссылку на изображение и установите соответствующую ширину и высоту.

Вот предварительный просмотр на следующем шаге.

http://jsfiddle.net/GDF9K/5/

Надеюсь, это поможет!