Question

我以前从未尝试过。我创建了一个包含两个图标的图像精灵。每个图标宽26px。所以精灵是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;
}

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

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

这可能与我现在这样做的方式有关吗？

Answer 1

请勿使用content插入图片，因为您无法修改其位置。而是将内容设置为" "并将精灵添加为背景图像。然后，您可以使用background-position属性将精灵移动到正确的位置。否则你的例子应该工作正常。

工作演示：

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

Answer 2

支持：之前和之后img标签上的伪元素是有限的，如果在大多数浏览器中都存在的话。

最好的解决方案是将你的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边框将有助于您理解不同的定位：）

CSS：使用带有css伪类的图像精灵：before和：after

2 个答案: