CSS在标题中设置背景图像

Question

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

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

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

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

Answer 1

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

单独的CSS无法检测文本的位置或位置。你需要使用JavaScript来做到这一点。

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

Answer 2

您可以使用伪元素来实现此目的，

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