Question

在我的css文件中，我有一条规则：两个在文本元素之前和之后添加两个背景图像。在我使用两张图片之前，一切都还可以。但现在我使用精灵：所以我需要得到大图像的区域并将其发布到元素（背景位置）但我有一个麻烦：如果我设置背景位置：我不能坚持它的位置像左中心和右中心：

background: url(../images/png/elements.png) no-repeat -5px -152px, url(../images/png/elements.png) no-repeat -5px -104px;

我怎么能将第一部分浮动到元素的左边和第二部分？

之前是：

background: url(../images/png/mail.png) no-repeat left center, url(../images/png/edit.png) no-repeat right center;

这是真的吗？

另外：我将其与:hover

一起使用

Answer 1

我担心除非元素本身的大小有限，否则不可能限制精灵图像的可见区域。

但是，也许您可以将背景图像分配给::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>

Answer 2

您使用的left和right属于background-position。像素定义覆盖了它们。

您应该将图像分成两个不同的元素。

Answer 3

不要使用Shorthand（特别是在position属性中）：
尝试使用类似的东西：

div {
    width: 100%;
    height: 190px;
    border: 1px solid red;
    background: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
    background-position: left top, right bottom;
    background-repeat: no-repeat;
}

<div></div>

编辑：带像素的示例，零和％。

div {
    width: 100%;
    height: 190px;
    border: 1px solid red;
    background-image: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
    background-position: 0 0, 100% -1215px;
    background-repeat: no-repeat;
}

<div></div>

CSS：两个背景图像，在一个元素上有位置

3 个答案:

编辑：带像素的示例，零和％。