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

Question

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

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

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

我需要从 Sprite 图像的右上角选择一个宽 600 像素、高 400 像素的矩形区域。我需要将这部分放在 body 元素的右上角作为背景。

然后我需要选择图像 Sprite 最左下角的部分，它也是 600 像素宽和 400 像素高。我需要将这部分作为背景图片放在正文的右下方。

Answer 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 背景 Sprite 的基础知识，现在几乎所有其他事情都已经为您完成了 ;)