Скрыть текст привязки при настройке фонового изображения - PullRequest
Новая
       24

Скрыть текст привязки при настройке фонового изображения

3 голосов
/ 12 марта 2012

Я использую wordpress для генерации ul с тегами привязки, и у меня есть отдельные классы для каждого элемента, я устанавливаю фоновое изображение для каждого тега привязки со следующим кодом

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

.shop a {
    background-image:url('../images/shopFull.png');
    width:209px;
    height: 74px;
    display:block;
}

Здесь выводится html 

<nav class="menu-main-navigation-container"><ul id="menu-main-navigation" class="nav-bar"><li id="menu-item-22" class="shop menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost:8888/goodMorningMoon/shop/">Shop</a></li>
<li id="menu-item-21" class="services menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost:8888/goodMorningMoon/services/">Services</a></li>
<li id="menu-item-23" class="blog menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost:8888/goodMorningMoon/blog/">blog</a></li>
<li id="menu-item-20" class="contact menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost:8888/goodMorningMoon/contact/">Contact</a></li>
</ul></nav>

Ответы [ 2 ]

6 голосов
/ 12 марта 2012

Классический взлом для этого: 

a { text-indent: -9999px; }

Проблема с этим конкретным решением не слишком хороша для SEO. Если вы хотите что-то более надежное, вы можете использовать белый текст на белом backgorund, или этот другой взломать: 

a { font-size: 0; }
5 голосов
/ 12 марта 2012

Использование text-indent MDN документы и overflow:hidden. 

shop a {
    background-image:url('../images/shopFull.png'); 
    width:209px; 
    height: 74px; 
    display:block;

    text-indent:-9999px;
    overflow:hidden;
}
...