Question

我一直在摆弄一个用于背景的图像精灵。

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

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

我需要从精灵的右上角选择宽度为600像素，高度为400像素的图像精灵中的矩形区域。我需要将此部分放在body元素的右上角作为背景。

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

Answer 1

AFAIK你每个元素只能设置一个背景图像，所以你必须添加伪元素（：之后/：之前）

#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背景精灵的基础知识，现在已经为您完成了其他所有事情;）

图像精灵 - 如何选择正确的区域，然后放置在所需的位置

1 个答案: