1

背景で使用する画像スプライトをいじっています。

画像の 2 つの部分を選択し、ボディの背景の異なる場所 (左下と右上) に配置する必要があります。

幅1700px、高さ1100pxの長方形の画像があるとしましょう。これは私の画像スプライトです。

画像スプライトから、スプライトの右上から幅 600 ピクセル、高さ 400 ピクセルの長方形の領域を選択する必要があります。この部分を body 要素の右上に背景として配置する必要があります。

次に、幅 600 ピクセル、高さ 400 ピクセルのイメージ スプライトの左下の部分を選択する必要があります。この部分を背景画像として本体の右下に配置する必要があります。

4

1 に答える 1

0

AFAIKでは、要素ごとに1つの背景画像しか設定できないため、疑似要素を追加する必要があります（：after /：before）

#area {
    position: relative; /*by relatively positioning the element it acts as the reference point when absolutely positioning the pseudo-elements*/
    z-index:1; /*positive z-index will allow for the correct z-axis positioning of the pseudo-elements*/
    /*you could set any background you want, your 2 background images will be in :before and :after*/
}
#area:before,#area:after {
    position: absolute; /*we want to position them*/
    z-index: -1; /*_back_ground-images... so they are behind #area*/
}
#area:before {
    /*set width, height, the 1st background-image, ... here*/
}
#area:after {
    /*set width, height, the 2nd background-image, ... here*/
}

疑似要素にdisplay：blockとcontent： ""を追加して、省略されないようにする必要がある場合があります

編集：CSSバックグラウンドスプライトの基本を知っていると思いますが、他のほとんどすべてがあなたのために行われています;）

于 2012-04-29T14:33:19.730 に答える