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

Question

我想将图像设置为标题的背景，但仅限于空白区域。我不想显示标题文本所在的任何背景。所以，我有以下 HTML 标题：

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

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

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

Answer 1

您可以使用伪元素来实现这一点，

   h1:before 
 {
 content:url(your_img.jpg);
 }

Answer 2

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

单独的 CSS 无法检测您的文本在哪里，或者它有多少位。你需要使用 JavaScript 来做到这一点。

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