Создание встроенных символов, которые используют изображения и текст

Question

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

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

Итак, ради этой работы в качестве примера / вопроса:

Это изображение: http://gumOnShoe.net/NewCard/Frames/Mana/mana_circle.png

Так что, в принципе, мне нужно, чтобы текст работал так:

This is a paragraph (1) of the text.

Где (1) имеет размер, уменьшенный соответствующим образом с цифрой 1, центрированной внутри него. изображение может быть 1,2 em, чтобы компенсировать текст, но я измерим это позже. Я делаю это в javascript, но если кто-нибудь может помочь мне понять, каким будет стиль CSS, я могу пойти с этим оттуда.

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

Answer 1

Вы захотите включить (1) внутри диапазона, который установлен на display: inline-block;

Это даст возможности элемента блока пролета (установить фоновое изображение и ширину), пока он продолжает течь стекст.Вы можете изменить размер фонового изображения, используя свойство background-size и задав для него одинаковую ширину диапазона.

Проверьте это JSFiddle .

Answer 2

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

Используя css3, вы могли бы сделать это следующим образом:

font-family:monospace;
font-size:2em;
padding:5px;
background: url(http://gumonshoe.net/NewCard/Frames/Mana/mana_circle.png) no-repeat center center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;

оформить демонстрацию:http://jsfiddle.net/gWhqP/

Answer 3

Насколько я знаю, вы не можете изменить размер фонового изображения с помощью CSS.Если ваше изображение не нужно было динамически изменять, вы можете просто обернуть число в <span> с соответствующим background-image и другими установленными правилами CSS.

Однако в последнем будет работать следующеебраузеры, которые поддерживают CSS display: inline-block;:

<p>
    Lorem 
    <img 
      src="http://gumOnShoe.net/NewCard/Frames/Mana/mana_circle.png" 
      style="width: 1em; height: 1em;" />
    <span 
      style="margin-left: -1em; 
             width: 1em; 
             display: inline-block; 
             text-align: center;">1</span>
    ipsum.
</p>

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

<p class="big-text">
    Lorem <span class="number">1</span> ipsum
</p>
<p class="small-text">
    Lorem <span class="number">1</span> ipsum
</p>

... с CSS:

p.big-text span.number {
    background-image: url(/big-circle.png);
}

p.small-text span.number {
    background-image: url(/small-circle.png);
}

Answer 4

Я вижу только это, работая с моноширинным шрифтом.Используйте свое изображение для background-image элемента, содержащего текст.Получить индекс «1» в строке.Установите для background-position значение em индекса + 1. Если имеется несколько вхождений, вам придется наложить дополнительные абсолютно позиционированные элементы ниже элемента, содержащего текст.