html - CSS 在标题中设置背景图片

Question

我想将图片设置为标题的背景，但只能在空白区域。我不想在标题文本所在的位置显示任何背景。所以，我有以下 HTML 标题:

<h2><span>Some text</span></h2>

h2{
    background: url("image.png");
}

问题是，我不想在 span 中显示这个标题背景，而是希望 span 适应页面(父元素)的背景图像。我无法为跨度设置特定的特定背景，因为它与页面背景不匹配。那么我该如何解决呢？

Answer 1

您需要将图片的背景位置与文字进行协调。我不确定您的确切布局是什么，因此请相应地调整您的值。

CSS 本身无法检测您的文本在哪里，或者它有多少位。您需要使用 JavaScript 来执行此操作。

h2 {
    background: url(image.png);
    background-repeat:no-repeat;
    background-position:5px 5px;
    padding-left:30px;
}