有没有一种方法来创建一个文本，在CSS中有一个背景图像

<h2> MyTitle </h2>

我需要把背景图像到MyTitle文本，但只到MyTitle文本。

我不希望在<h2></h2>元素的任何背景。

有没有办法在css中做到这一点?

代码:

<!DOCTYPE HTML>
<title>MyTitle</title>
<style>
  head { display: block; }
  title { display: inline; background: lime; }
</style>

演示:http://jsbin.com/abitek

这是一个简单背景色的例子，当然你也可以使用background-image。

参见使用CSS显示<head>等隐藏元素

编辑现在OP提到他指的是标题(例如<h1>)而不是<title>:

关键是使用display: inline或display: inline-block。

代码:

<!DOCTYPE HTML>
<title>Test</title>
<style>
  h1 { display: inline; background: lime; }
</style>
<h1>Test</h1>
<p>Some content.

演示:http://jsbin.com/ekusad

同样，这是一个简单背景色的例子，当然你也可以使用background-image。

我不完全确定你对title元素的意思，因为这是默认情况下head部分中不可见的元素，但我想我以某种方式掌握了你的意思，只在文本后面有背景。试试这个，背景图像只应用于文本，title元素的其余部分没有得到背景图像。注意，这不适用于html页面head部分中的title元素。这只是告诉你如何设置文本背景。

<title> <span>My Text</span> </title>

CSS

title > span { background-image: url(myimage.png); }

您可以通过将所需的文本包裹在span中并像这样设置css来为某些标题文本添加bg图像:
HTML
<h1>My title.<span class="myTitleBG"> My Red Title. </span>More title</h1>
CSS:
h1 span.myTitleBG { display: inline-block; background-color: #f00; /*for example purposes*/ background-image: url(image.png); }
IE<7将看不到display: inline-block;。我使用了这个显示属性，所以如果你需要显示更多/更少的bg图像，你可以为span添加高度和宽度。
http://jsfiddle.net/b2s9m/

如果你想在标题栏上放一个背景，那是不可能的。浏览器只从<title>标签中提取文本，并根据其标准显示文本。

对于正文中的常规文本，您可以使用CSS设置背景，如

<p class="backgroundText"> My text </p>

在你的CSS中定义backgroundText类。

相关内容

最新更新

热门标签：