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;
}

次に、ストライプが一致するまで、一度に 1 ピクセルずつ「-4px」に変更します。この例では、「-4px」は背景画像を 4 ピクセル左に移動します。

于 2012-11-08T09:46:36.133 に答える