在更大的 div 中显示 CSS 精灵中的一个图标

Question

我有一张包含各种 40x40px 图标的 sprite 图片：

然后我有一个 div 比这个精灵大得多。我想在 div 中间显示播放图标（左、上 = 120、0）。我不想显示整个精灵。

如何在不编辑 HTML 标记或图像的情况下使用 CSS 执行此操作？

.play {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10%;
  bottom: 10%;
  background-color: rgba(255, 255, 0, .5);
  background-image: url(http://i.stack.imgur.com/pxuWK.png);
  background-position: -120px 0;
}

<div class="play" title="Play Button Hitbox"></div>

Answer 1

您将遇到处理溢出的问题，因为 div 较大。

我的建议是创建一个 :before 或 :after 元素以将播放图标放入其中，然后相对于其父元素定位它以便隐藏溢出。

执行此操作的代码如下：

.play {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10%;
  bottom: 10%;
  background-color: rgba(255, 255, 0, .5);
}
.play:after {
  content: "";
  position: absolute;
  background-image: url(http://i.stack.imgur.com/pxuWK.png);
  background-position: -120px 0;
  width: 40px;
  height: 40px;
  left: 50%;
  margin-left: -20px;
  top: 50%;
  margin-top: -20px;
}

<div class="play" title="Play Button Hitbox"></div>

http://jsfiddle.net/dzg9h2r6/1/

Answer 2

你可以使用伪元素来应用你想要的特定部分，代码如下：

   .play {
        position: absolute;
        left: 10%;
        right: 10%;
        top: 10%;
        bottom: 10%;
        background-color: rgba(255, 255, 0, .5);
        background-position: -120px 0;
    }
    .play:before {
        display:inline-block;
        content:'';
        width: 35px; /*width of icon*/
        height: 44px; /*height of icon*/
        background-position-x: -43px; /*x position of icon relative to sprite image*/
        background-position-y: 4px; /*y position of icon relative to sprite image*/
        background-image: url(http://i.stack.imgur.com/pxuWK.png);
    }

在更大的 div 中显示 CSS 精灵中的一个图标

Display one icon from CSS sprite in a larger div

html

css

css-sprites