1

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

条纹背景示例

我会尽量对这个问题给出最好的描述：

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

我对此的唯一解决方案是：

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

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

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

有没有办法解决这个问题？

4

1 回答 1

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

于 2012-11-08T09:46:36.133 回答