如何仅向文本添加背景？

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中的东西......所以你可以将文本嵌入其中。

例如......如果你真的有：

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