html - 裁剪背景图像

Question

我有一个大的 png 文件，我将其用作使用 css 的各种元素的背景图像文件。当我知道元素的宽度和高度时，我可以使用该图像，例如

<div id="play-btn"></div>
.play-btn{
    background: url(../images/bigImage.png) no-repeat 203px 415px;
    width: 100px;
    height: 50px;
}

当我不想提供 elemtn 的宽度/高度时如何使用那个 bigImage 作为背景，比如

<div id="star-icon">star on left</div>
.star-icon{
    background: /*How I will use bigImage here on where star is at location 50,50*/,
    padding: 5px 0 5px 60px;
}

Answer 1

您必须使用负左和上，它会朝那个方向移动 bgImage，以便它从 50 像素开始显示。

background: url(../images/bigImage.png) no-repeat -50px -50px;