Question

<h2> MyTitle </h2>

我需要将背景图片放到MyTitle文字中，但仅限于MyTitle文字。

我不想要<h2></h2>元素中的任何背景。

有没有办法在css中这样做？

Answer 1

代码：

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

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

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

请参阅Displaying hidden elements like <head> using CSS。

现在编辑，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。

Answer 2

我不完全确定您对title元素的意思，因为默认情况下这是head部分中不可见的元素，但我想我会以某种方式理解你的背景是什么意思只在文本后面。试试这个，背景图像仅应用于文本，title元素的其余部分不会获得背景图像。请注意，这不适用于html页面的title部分中的head元素。它只是向您表明如何仅为文本设置背景。

<强> HTML

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

<强> CSS

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

Answer 3

您可以将bg图像添加到某个标题文本中，方法是将所需的文本包装在一个范围内并像这样设置css：

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＆lt; 7将无法看到display: inline-block;。我使用了这个显示属性，因此如果你需要显示更多/更少的bg图像，你可以为跨度添加高度和宽度。

http://jsfiddle.net/b2s9m/

Answer 4

如果您想在标题栏中添加背景，则无法完成。浏览器仅从<title>标记中选取文本并根据其标准显示。

对于正文中的常规文本，您可以使用CSS来创建这样的背景，

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

并在CSS中定义backgroundText类。

有没有办法在CSS中创建具有背景图像的文本

4 个答案: