如何仅显示图像的一部分作为背景

Question

嗨，

我有这个代码：

input[type="checkbox"]:not(old) + label {
  background: url("sprites.gif") no-repeat -220px -54px;
  box-sizing: border-box;
  height: 25px;
  padding: 0 0 0 35px;
}

问题是我用作背景的图像包含许多精灵，所以我只想显示坐标 0 -100 像素的那个。但是，由于标签宽度可能会有所不同（因为包含的文本的长度），它还会显示我需要的精灵旁边的精灵。

如何在不编辑图像的情况下解决这个问题？我只想显示 25x25px 的背景图片。其余的我不需要。我可以定义高度，但不能定义宽度，因为正如我已经说过的，它必须适合标签中的文本。

谢谢。

    input[type="checkbox"]:not(old) + label {
      background: url(http://cdn.sstatic.net/Sites/Whosebug/../../img/share-sprite-new.svg?v=78be252218f3) no-repeat -220px -54px;
      box-sizing: border-box;
      height: 25px;
      padding: 0 0 0 35px;
    }

<input type="checkbox"><label>Some randome text</label>

Answer 1

您的问题：不要紧密耦合（不要在标签上应用背景），而是为该图像创建一个新的跨度。这也有助于保持您的代码干净

.sprite {
  display: inline-block;
  background:
 url(http://cdn.sstatic.net/Sites/Whosebug/../../img/share-sprite-new.svg?v=78be252218f3) no-repeat -225px -50px;
  height: 25px;
  width: 25px;
}

<input type="checkbox"><span class="sprite"></span><label>Some randome text</label>

Answer 2

不是直接在 label 上应用 background，而是创建一个伪元素，将其调整为精灵中图像的尺寸，然后将 background 应用到它.

input[type="checkbox"]:not(old)+label{
    box-sizing:border-box;
    height:25px;
}
input[type="checkbox"]:not(old)+label::before{
    background: url(http://cdn.sstatic.net/Sites/Whosebug/../../img/share-sprite-new.svg?v=78be252218f3) no-repeat -220px -54px;
    content:"";
    display:inline-block;
    margin-right:10px;
    height:25px;
    vertical-align:bottom;
    width:25px;
}

<input type="checkbox"><label>Some random text</label>

如何仅显示图像的一部分作为背景

How to show only part of an image as the background

css

label

background-image