html - CSS:两个背景图像在一个元素上的位置

Question

在我的 css 文件中，我有一个规则:两个在文本元素前后添加两个背景图像。在我使用两张图片之前一切正常。但是现在我使用 Sprite :所以我需要获取大图像的区域并将其发布到元素(背景位置)但我有一个麻烦:如果我设置背景位置:我无法坚持它的位置，如左中心和右中心:

背景:url(../images/png/elements.png) 不重复-5px -152px, url(../images/png/elements.png) 不重复-5px -104px;

如何将元素的第一部分 float 到元素的左侧，第二部分 float 到元素的右侧？

之前是:

背景:url(../images/png/mail.png) 不重复左居中，url(../images/png/edit.png) 不重复右居中；

这是真的吗？

另外:我将它与 :hover 一起使用

Answer 1

除非限制元素本身的大小，否则恐怕无法限制 Sprite 图像的可见区域。

但是，也许您可​​以将背景图像分配给位于父框左侧/右侧的 ::before 和 ::after 伪元素正确(通过 float 或 absolute 定位)。

这样您就可以独立处理每个图标的位置。

例如:

.box:before, .box:after {
  content: "";
  display: inline-block; /* or position these elements by floats, etc. */
  width: 48px;           /* for instance */
  height: 48px;          /* for instance */
 }

.box:before {
  background: url(../images/png/elements.png) no-repeat -5px -152px;
}

.box:after {
  background: url(../images/png/elements.png) no-repeat -5px -104px;
}

<div class="box"></div>