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

Question

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

Answer 1

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

<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 2

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

Answer 3

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

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

<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;} 

Удачи!

Answer 4

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

<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>