<分区>
css - 如何在CSS背景中获取中间图像？
标签 css
我只想在 div 中插入红色图像。
我想做 css sprite。问题是我有 3 张这样的图片。但 div 将是 900px。如何把中间的图片放到div中？
#a {
background: url(../img/a.png) 0 0 no-repeat;
background-size: 100% 100%;
width: 100px;
height: 100px;
}
最佳答案
要使用 sprite 技术，您需要一个单独的元素，其尺寸等于 spritesheet 上的图像。可以为此目的使用伪元素:
.container {
position: relative;
}
.container::before {
content: '';
/* Vertical centering */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
/* Sprite */
display: block;
width: 31px;
height: 69px;
background: url(http://i.stack.imgur.com/BpoSb.png) -30px 0;
}
/* Put all the children in front of ::before */
.container > * {
position: relative;
}
关于css - 如何在CSS背景中获取中间图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20125638/