-1

背景画像を持つ部門がありますが、可変サイズである必要があります。3枚の画像を使用しています。上部の 1 つ、下部の 1 つ、中央の繰り返し 1 つ。

私は作業する div を 1 つだけ持っていて、それに中央の背景画像を与えてから、前後の擬似クラスを使用して他の画像を配置しました。半透明なので、メインディビジョンの画像がこの 2 つの背後に表示されます。cssでこれを回避する方法、またはそれを行うためのより良い方法はありますか?

HHTML:

<div class="faq">
  <strong>Q.&nbsp;Who was the greatest business man?</strong><br />
  <p><strong>A.&nbsp;</strong>Noah. He kept his stock afloat, while the rest of the world went into liquidation.</p><br />
  <strong>Q.&nbsp;How should my employees let off steam?</strong><br />
  <p><strong>A.&nbsp;</strong>Take them see to see the comedian Sampson. He'll bring the house down.</p><br />
</div>

CSS - スタイル

.faq{
  background: transparent url(../images/image_middle.png) repeat-y center;
  color: #ffffff;
  display: block;
}
.faq:before {
  background: transparent url(../images/image_top.png) no-repeat center top !important;
}
.faq:after {
  background: transparent url(../images/image_bottom.png) no-repeat center bottom !important;
}

CSS - レイアウト

.faq:before {
    padding-top: 20px;
    display: block;
    content: "\A";
}
.faq:after {
    padding-top: 14px;
    display: block;
    content: "\A";
}
.faq{
    margin: 20px 0 5px !important;
    padding: 0 20px 0 15px !important;
}
4

1 に答える 1

1

これを行う最良の方法は、複数の背景を使用することです。https：//developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgroundsを参照してください。このようにして、3つの異なる画像とその位置を要素のスタイルとして指定できます。最初に一番上の画像をリストします。

ブラウザのサポート要件がCSSの複数の背景で機能しない場合は、h1またはp:lastの内部などの他の要素をスタイル設定することで同じ結果を得ることができますdiv。このアプローチは、その中の要素の位置に非常に注意する必要があるため、より複雑ですdiv。

背景または画像は、常にその上の画像の透明な領域を通して表示されることに注意してください。これが不要な場合は、フェードアップしようとしている背景色など、そのカバーアップ画像に不透明なものを配置する必要があります。

より詳細なヘルプについては、使用しているコードの自己完結型の例を投稿してください。

于 2012-11-13T18:17:50.243 に答える