Показать текст на картинке background

Я пытаюсь сделать что-то новое для своего проекта. У меня есть значок, скажем, как значок Mail.Показать текст на картинке background

Когда страница загружается, значок также отображается. Основываясь на количестве запросов, которое я делаю в фоновом режиме во время загрузки страницы, я хотел бы отобразить это число (количество) внутри/на значке. Например, как я вижу уведомления Facebook, отображаемые поверх значка или Gmail, на нем есть 2 новых письма и т. Д.

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

источник

2013-10-02 ZVenue

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

Вы говорите о знаках или фактическом значке где-то на странице? Может ли номер отображаться как текст или он должен быть частью графика? – Ennui

Я думаю, что этот вопрос должен был быть размещен на [meta.stackoverflow.com] (http://meta.stackoverflow.com) – vishalkin

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

источник

2013-10-02 13:39:45

Не уверен, почему это было приостановлено - это очевидный ответ. Вам нужен 'span' или' div' с «фоновым изображением», который вы будете использовать для хранения целочисленной переменной. – user1477388

@ ced-b .. это хорошая идея. Это то, что я ищу. Просто общие идеи о том, как решить проблему отображения. Некоторые получают больше удовольствия от опроса, чем сосредоточение внимания на помощи. :-) – ZVenue

@ZVenue Yep - Я рад, что мог помочь. –

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

HTML:

<a href="#" class="icon" > 
    <span class="jewel">2</span> 
</a>

CSS:

.icon { 
    position: relative; 
    display: inline-block; 
    height: 24px; 
    padding: 0px 4px 0px 20px; 
    background: ....; 
} 

.jewel { 
    position: absolute; 
    display: block; 
    top: -8px; right: -8px; 
    height: 16px; width: 16px; 
    text-align: center; 
    color: White; 
    background-color: Red; 
    overflow: hidden; 
}

Работа скрипку: http://jsfiddle.net/gE3hz/

источник

2013-10-02 14:13:51 Abhitalks

Большое спасибо за предоставление решения. – ZVenue

Я думаю, что это именно то, что я ищу .. спасибо снова. – ZVenue

Рад помочь! :) – Abhitalks

Показать текст на картинке background

ответ

Смежные вопросы