1

我一直在摆弄要在背景中使用的图像精灵。

我需要选择图像的两个部分，然后将它们放置在主体背景中的不同位置，一个在左下角，一个在右上角。

假设我有一个矩形图像 - 1700px 宽和 1100px 高。这是我的图像精灵。

我需要从图像精灵中选择一个矩形区域，该区域距离精灵的右上角为 600 像素宽和 400 像素高。我需要把这部分放在body元素的右上角作为背景。

然后我需要选择图像精灵的最左下部分，它也是 600 像素宽和 400 像素高。我需要把这部分放在身体的右下角作为背景图片。

4

1 回答 1

0

AFAIK 每个元素只能设置一个背景图像，因此您必须添加伪元素（：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 回答