выделение текста css

Question

Прошло некоторое время, так как у меня была проблема, связанная с CSS, но я здесь.Короче говоря, я хочу выделить текст градиентным фоном, которого мне удалось добиться, используя тег <span> и установив на него фоновое изображение.Проблема в том, что он начинает немного ломать голову и ломается, когда текст переходит на новую строку.

Мне удалось это исправить, но HTML ужасен, и мне не нравится компрометировать HTML-код для стиляцели как правило.

Лучший способ описать это - просто показать вам.

http://jsfiddle.net/sambeckhamdesign/2HSqh/11/

Верх <li> - это хороший HTML с разбитымстиль и дно <li> - это то, как оно должно выглядеть, но с ужасной разметкой HTML.

Любые решения, безусловно, приветствуются.Не против использования Javascript или jQuery, но я бы сделал это в CSS, если бы мог.

Та домашние животные:)

Answer 1

Я могу предоставить вам хаки css, работающие только для firefox и safari

::selection {
    background: #ffb7b7; /* Safari */
}

::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

Ссылка:

http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques

Надеюсь, эта помощь:)

Answer 2

Может быть, это обеспечивает то, что вы хотите

ul#container li.hilight {
    padding:3px 20px;
    background:url('http://www.sambeckhamdesign.com/_images/rain_1.jpg') left repeat-y #c06;
    line-height:30px;
    color:#fff;
}

и

<li class="hilight">
        This is how the text should look
    <br />
        but the HTML markup is messy
</li>

Answer 3

Лучший способ сделать это в конце концов - использовать тег <span>.Я ненавижу делать это и стараюсь избегать этого, когда могу, но это нужно было использовать в этом случае.Смотрите обновленную скрипку JS в вопросе о том, как я это сделал.

Answer 4

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