17

我以前从未尝试过。我创建了一个包含两个图标的图像精灵。每个图标的宽度和高度均为 26 像素。所以精灵是26x52px。

我有一个在 div.something 或 div.anything 中的元素。根据它所在的班级，我想在左侧或右侧添加一个角帽。

因此，我将 .element 相对定位，将:before伪类应用于 img 并将其绝对定位，高度和宽度为 26px，因此只有一个精灵图标适合。我还应用“溢出：隐藏”以隐藏精灵上的第二个图标。

.element {
    position:relative;
}

.element:before{
    content: url("../images/sprite.png");
    position: absolute;
    height:26px;
    width:26px;
    overflow:hidden;
}

.something .element:before {
    top: -2px;
    left: -2px;
}

anything .element:before {
    top: -28px;
    right: -2px;
}

这适用于我在精灵中使用第一个顶部图标的左角。但是现在我想知道如何在精灵中只显示“anything .element”的第二个图标。

所以实际上“掩码”应该定位在-2px，-2px，但里面的精灵img应该从-26px开始，所以显示第二个图标。

我现在这样做的方式是否可以使用 css？

4

2 回答 2

27

不要content用来插入你的图片，因为你不能修改它的位置。相反，将内容设置为" "并将精灵添加为背景图像。然后，您可以使用该background-position属性将精灵移动到正确的位置。否则，您的示例应该可以正常工作。

一个工作演示：

http://jsfiddle.net/RvRxY/1/

于 2011-08-15T12:57:10.063 回答
3

对 img 标签上的 :before 和 :after 伪元素的支持是有限的，如果在大多数浏览器上都存在的话。

最好的解决方案是将你的 img 放在一个 div 中，然后将类应用于实际的 div，而不是 img。

您几乎可以正确使用伪元素。你可以试试这个：

.somediv { position:relative;}

.somediv:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  top: 0;
}

.somediv.foo1:before { 
  background: url("../images/sprite.png") no-repeat -2px -2px;
  left: 0;
}

.somediv.foo2:before { 
  background: url("../images/sprite.png") no-repeat -2px -28px;
  right: 0;
}

使用背景：；属性而不是内容：；属性，以便您可以将精灵定位在 :before 伪元素中。

剩下：; 对：; 和顶部：; 应该用于伪元素相对于其父元素 (.somediv) 的绝对定位。

在你的伪元素周围放置一个 1px 的边框将帮助你理解不同的定位:)

于 2011-08-15T13:34:26.657 回答