CSS，HTML覆盖透明背景

Question

我有一段时间以来一直在反对这一点：

我会尝试对此问题给出最佳描述：

在图像上，您会看到标题（例如h2）。你在背景上看到条纹（身体背景）。我想要实现的是将此标题与灰色条纹的背景（图像上的蓝色边框标记），但文本在哪里我不想有这个背景，但身体的背景（标记）在红色边框）。

我唯一能解决的问题是：

<h1><span>Our Solutions</span></h1>

h1
{
  background: url(stripes.png);
}
h1 span
{
  background: url(body-stripes.png)
}

但是将标题与来自身体的条纹相匹配存在问题。

有什么方法可以解决这个问题吗？

Answer 1

我会在H1周围放一个包装，但匹配条纹的关键是使用背景定位。

<div id='bar'><h1>Our Solutions</h1></div>

#bar
{
  width:100%;
  background: url(stripes.png);
}
h1{
  display: inline-block;
  width:50px;
  height:18px;
  overflow: hidden;
  background-attachment: fixed;
  background: url(body-stripes.png);
  background-position: -4px 0px;
}

然后一次更改“-4px”1个像素，直到条纹匹配为止。在此示例中，“ - 4px”将背景图像向左移动4个像素。