Question

我正在尝试通过CSS将不同图像的表情符号替换为<img>元素（以便我可以将它们与正在使用的样式相匹配）。我以为我可以使用:before CSS伪元素插入另一个笑脸，并隐藏原始元素。这可以工作，除了浏览器似乎没有插入额外的图像！只有当我使用<img>元素进行尝试时才会发生这种情况，当我使用<span>进行尝试时效果非常好。我试过的代码：

<!doctype html>
<style>
img.icon:before {
    display: inline-block;
    content: url(smiley.png);
    width: 16px;
    height: 16px;
}
</style>
<p>Lorem ipsum <img src="smiley.png" class="icon" alt=":)"> dolor sit amet...</p>

http://www.w3.org/TR/CSS2/generate.html#before-after-content处的说明在底部有一个注释：

请注意。该规范没有完全定义的互动：之前和之后：更换后元素（例如HTML中的IMG）。这个将在a中更详细地定义未来的规范。

我们正在使用背景图像，就像评论中建议的那样，但是存在的问题是图像无法使用默认打印设置进行打印。我们正在考虑的下一个选项是使用<span class="icon"><img ...></span>并将:before放在跨度上，但它有点难看。

我也想知道这是否在CSS3中指定，以便在不久的将来有机会修复它。

Answer 1

使用起来几乎肯定更容易：

img.icon:before {
display: inline-block;
background-image: transparent url(smiley.png) 0 0 no-repeat;
width: 16px;
height: 16px;
}

您可能不想使用background-image，但:before和:after psuedo元素已经很难实现;在这个阶段尝试使用content放置图像可能是一个太过分了。

但是，我不确定我是否看到了这种方法的重点;看来你会以两个版本的smiley.png彼此相邻结束。这可能更容易实现（在服务器端用主题smiley.png替换通用smiley.png），而不是客户端。

Answer 2

另一种方法是设置background-image并使用溢出隐藏img元素，而不使用:before：

<style>
.icon { 
  width: 0;
  height: 0;
  padding-top: 16px;
  padding-left: 16px;
  overflow: hidden;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.smiley { background-image: url(smiley.png); }
</style>

<img class="icon smiley" src="smiley.png" alt=":)">

另外，请查看有关使用data attributes instead of classes的文章。

使用以下内容在<img/>旁边插入另一个图像

2 个答案: