1

現在、サイドバーを 3 つの異なる背景で動作させようとしています。スクリーンショット

3コンテナで直そうとしましたがうまくいきません(トップ画像が消える等)。これを行う最善の方法についてのアドバイスは素晴らしいでしょう。

デモ

HTML

<div class="footer">
    <div class="head">
        <div class="block">
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
        </div>
    </div>
</div>

CSS

.footer {
    background: url(http: //i.imgur.com/NNtfaL6.png) bottom left no-repeat;
    width: 190px;
    margin-left: 20px;
}
.head  {
    background: url(http: //i.imgur.com/sOVew68.png) top left no-repeat;
    width: 260px;
}
.block {
    background: #1b1b1b;
    color: #fff;
    width: 175px;
    margin-left: 80px;
}
4

1 に答える 1

0

引き戸

2 つの小さな画像を使用して残りを背景色で塗りつぶす代わりに、上部の画像を必要以上に高くして、同じ小さな画像を下部に使用する方がはるかに簡単です。画像は PNG 形式であるため、上部の画像を非常に高くしても、画像のサイズはほとんど増加しません (追加される部分は 2 つの異なる色のブロックにすぎず、PNG 画像では非常に効率的に圧縮されるため)。

必要以上に大きな画像を使用するこのアプローチは、「引き戸」と呼ばれます。通常、可変幅のコンテンツをスタイルするために水平方向に適用されますが、この場合のように、可変高さのコンテンツをスタイルするために垂直方向にも使用できます。

更新されたデモ   (JSFiddle での実行に問題がある場合は、スタンドアロン バージョンのデモを参照してください)

HTML

<div class="outer">
    <div class="inner">
        Test<br/>Test<br/>Test<br/>Test<br/>
        Test<br/>Test<br/>Test<br/>Test<br/>
        Test<br/>Test<br/>Test<br/>Test<br/>
    </div>
</div>

CSS

.outer {
    /* Short bottom image */
    background: url(http://i.imgur.com/q3Y9q16.png) 70px bottom no-repeat;
    width: 266px;
    padding-bottom: 36px;   /* Same as height of short bottom image */
}
.inner {
    /* Tall top image */
    background: url(http://i.imgur.com/xxRw8zW.png) 0px top no-repeat;
    color: #fff;
    padding: 74px 10px 20px 90px;
}
于 2013-05-11T19:59:10.220 に答える