0

私は、コンテンツ領域に画像ベースの影 (単純な影ではないため、CSS3 を使用できません) を持つデザインに取り組んでおり、垂直方向に柔軟にする必要があります。

サイトで見られるように、デザインには白いコンテンツ領域があり、右上端に影があり、右下隅に影があり、下端に沿っています.

これを行うために、上部の影を処理するラッパーを作成し、その中のメイン コンテンツ領域の下部に背景画像を適用して、下部の影を処理しました。次に、背景を白にしました。私の考えでは、「下」の影の画像は、どれだけ拡大しても常にコンテンツ領域の下部にくっつき、残りは白い色で処理されます。

問題は、影の画像が明らかに div 内にあり、コンテナの外にぶら下げる方法がないことです。

問題の JSFiddle 、上部の影は問題なく見えますが、下部の影は div 内にあるため、背景色によっても色付けされます。

私はこれに対する解決策に頭を悩ませることができません。基本的に、div の内側にある影は、div の外側にきちんと配置する必要があります。

クイック リファレンス用の HTML:

<div id="contentWrapper">
      <div id="content">
            <h1>HTML Ipsum Presents</h1>
            <h2>Content in here</h2>
      </div>
</div>

ラッパーとコンテンツ領域の CSS:

#contentWrapper{
    background-image:url('../img/top-content.png');
    background-position:top right;
    background-repeat: no-repeat;
    width:820px;
    margin-left:200px;
}


#content{
    background-image:url('../img/bottom-content.png');
    background-position: bottom right;
    background-repeat:no-repeat;
    background-color:#FFF;
    width:802px;
}
4

1 に答える 1

0

複数の背景を使用できます:

#contentWrapper{
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top,
        url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right;
    width:820px;
    margin-left:200px;
}

デモ: http://jsfiddle.net/Y2dSD/8/

編集：

下の影を修正するには、使用します

#contentWrapper{
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top,
        url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right;
    width:820px;
    margin-left:200px;
    padding-bottom: 15px;
}

デモ: http://jsfiddle.net/Y2dSD/13/

しかし、それは CSS3 です。古いブラウザーで動作させたい場合は、新しいコンテナーを追加します。

HTML:

<div id="contentWrapper"><div>
      <div id="content">
            <h1>HTML Ipsum Presents</h1>
            <h2>Content in here</h2>
      </div>
</div></div>

CSS:

#contentWrapper{
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top;
    width:820px;
    margin-left:200px;
}
#contentWrapper>div{
    background:url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right;
    padding-bottom:15px;
}

デモ: http://jsfiddle.net/Y2dSD/17/

于 2012-09-10T22:00:46.213 に答える