我有一个包含各种 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>
最佳答案
你可以使用伪元素来应用你想要的特定部分,这里是代码:
.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);
}
关于html - 在更大的 div 中显示来自 CSS Sprite 的一个图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31818222/