Question

您好，

我有这段代码：

@Bean

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

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

谢谢。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

不是直接在background上应用label，而是创建一个伪元素，将其大小调整为精灵中图片的尺寸，然后将background应用到它上面。< / p>

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/stackoverflow/../../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>

Answer 2

您的问题：请勿紧密联系（不要在标签上应用背景），而是为该图片创建新的范围。这也有助于保持代码清洁

.sprite {
  display: inline-block;
  background:
 url(http://cdn.sstatic.net/Sites/stackoverflow/../../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>

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

2 个答案: