css - 背景画像を20px下に開始するには?

Question

私はこれを見回しましたが、それは簡単に思えますが、うまくいかないようです。

背景のあるdivがあります。背景を 20px から開始してから、y を繰り返します。残りの部分を繰り返します。

<div class="main_col"></div>
.main_col {
    width: 680px;
    float: left;
    background:#fff;
    background-position:50% 50%;
}

これは私がしようとしているものですが、div全体を埋めていますか?

これは私が試したことです.... http://jsfiddle.net/uzi002/gqqTM/4/

score 1 · Accepted Answer

現在の CSS2 標準では、1 つのクラス定義でこれを行うことはできません。

背景には別の div を使用します。

CSS3をいじりたい場合は、チェックアウトできます

background-origin

ブラウザのサポートに注意してください。

score 0 · Accepted Answer

padding-top: 20px を .main_col に追加して、その中にこの背景で追加の div を作成してみてください。

score 0 · Accepted Answer

.main_col {
    width: 680px;
    float: left;
    background: url("your image") 0px 20px;        
}

アップデート

これはgikerの例を使用しています。このようなことを試してください

score 0 · Accepted Answer

これを実現するために関連する 3 つの CSS プロパティがあります。

これは非常に冗長ですが、次のように 1 つのルールにまとめることができます。

background { url(myBackground.png) no-repeat 1px 1px }

background-position に相対値 (コードが示す % など) を使用することは可能ですが、px を使用する必要があります。

score -1 · Accepted Answer

~~マージン~~パディングを使用してみてください。

すなわち

.main_col {
    width: 680px;
    float: left;
    background:#fff;
    background-position:50% 50%;
    padding-top:20px;
}

5 に答える 5