Как добавить фон только к тексту?

Question

У меня есть фоновое изображение, поверх которого есть текст.Очень трудно читать текст из-за фона.Я хотел бы добавить белый фон непосредственно вокруг самого текста, чтобы текст можно было легко прочитать.Как я могу сделать это с помощью CSS / Javascript / jQuery?

Answer 1

У меня есть текст, содержащийся в <span> </span> с цветом фона: Белый;или что хочешь

Answer 2

Оберните ваш текст с пролетом:

<span class="white_bg">Your text here</span>

И поместите это в свой CSS-файл:

.white_bg 
{
    background-color: #ffffff;
    padding: 3px; /*add this if you want a bit of space around the text*/
}

Это должно сделать это.

Answer 3

Вы также можете использовать тень текста, реализованную в новейших веб-браузерах:

<div style="background: url(some_image.jpg); text-shadow: 1px 1px 1px #000; color: #fff">Readable</div>

или просто сделать что-то вроде

<div style="background: url(some_image.jpg);"><p style="background: #fff">Readable</p></div>

Answer 4

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

Например ... если у вас есть:

<div>Some Text</div>
div{background:url(/path/to/image.png);}

Вы можете изменить это на это:

<div><p>Some Text</p></div>
div{background:url(/path/to/image.png);}
div p{background:#fff;}

Удачи!