html - 具有透明度的 CSS、HTML 叠加背景

Question

一段时间以来我一直在反对这个问题:

我会尽量给这个问题最好的描述:

在图像上您会看到一个标题(例如 h2)。您会在带有条纹的背景( body 背景)上看到它。我想要实现的是让这个标题有灰色条纹的背景(在图像上标记为蓝色边框)，但是我不想在文本所在的地方有这个背景，但是 body 的背景(标记为红色边框)。

我唯一的解决办法是:

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

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

但是将标题中的条纹与 body 中的条纹进行匹配存在问题。

有什么办法可以解决吗？

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 个像素。