0

私のウェブサイトのコンテンツ div には、あらゆる種類のレイヤー スタイルを持つ独自の背景があります。HTML/CSS では、Photoshop から背景を取得して、背景画像として使用できます。私の問題は、コンテンツ div の高さが可変であることです。これを解決するために、上部のピクセルを取得して上部に設定し、中央に 1 つのピクセル行を配置します。これには、y の繰り返しと下部のピクセルがあり、それらを下部に配置します。これは機能しますが、中央の背景画像は、上部の背景画像の後、下部の背景画像の前に開始する必要があります。

div#content{
    background: url('contentbghead.png') top center no-repeat, 
                url('contentbgfoot.png') bottom center no-repeat, 
                url('contentbgmid.png') 0px 10px repeat-y;
    width:680px;
    height:300px;
}

私の結果はここにあります: http://tinypic.com?ref=30muazs

4

3 に答える 3

3

CSS2 では、複数の背景はサポートされていません。探しているものを実現するには、複数の div が必要です。

また、次の URL で、複数の背景に対するいくつかの CSS3 メソッドを確認することもできます。

CSS3 による複数の背景

ただし、この方法は IE9 より古いバージョンの IE では機能しません。

于 2012-04-23T20:44:10.140 に答える
0

こんにちは、 :beforeおよび:after CSS 疑似要素を使用して結果を得ることができます。

私は 1 つの div のみでコードを作成し、その 1 つの div で 3 つの画像すべてを使用し、中間画像もy-axisで繰り返し可能です。

注 :beforeおよび:after *疑似要素* IE-8までサポート

HTML

<div id="content">
Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content
</div>

CSS

    #content:after {
    background: url("http://i.imgur.com/5agws.png") no-repeat 0 0;
    content: " ";
    height: 50px;
    left: 0;
    position: absolute;
    width: 680px;
}

#content:before {
    background: url("http://i.imgur.com/P7jL5.png") no-repeat 0 0;
    content: " ";
    height: 50px;
    position: absolute;
    top: -50px;
    width: 680px;
}

#content {
    background: url("http://i.imgur.com/vAqRU.png") repeat-y 0 0;
    color: white;
    position: relative;
    top: 50px;
    width: 680px;
    white-space: pre-wrap;

}

理解を深めるためにデモを参照してください:- http://jsfiddle.net/5Lkmr/40/

于 2012-04-24T07:43:04.607 に答える
0

これは、複数の背景だけでは不可能です。各背景エントリは別の背景エントリとは関係がないためです。ただし、疑似要素を使用してこの効果を実現できます。

div#content{
    position:relative;
    background: url('contentbghead.png') top center no-repeat, 
                url('contentbgfoot.png') bottom center no-repeat;
    width:680px;
    height:300px;
}
div#content:before {
    content:"\0020"; font-size:0px;
    display:block; position:absolute; top:10px; left:0px; bottom:10px;
    width: /* Whatever your BG's width is */;
    background:transparent url('contentbgmid.png') repeat-y left top;
    pointer-events:none;
}

疑似要素がコンテンツの上にレイヤー化されている場合 (ポインター イベントをサポートしていないブラウザーの場合)、クリック イベントをキャプチャする可能性があるため、z-index レイヤー化に注意する必要があります。

于 2012-04-23T22:22:00.073 に答える