html - 在更大的 div 中显示来自 CSS Sprite 的一个图标

Question

我有一个包含各种 40x40 像素图标的 Sprite 图像:

然后我有一个比这个 sprite 大得多的 div。我想在该 div 的中间显示播放图标 (left, top = 120, 0)。我不想显示整个 Sprite 。

如何在不编辑 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

你可以使用伪元素来应用你想要的特定部分，这里是代码:

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