css - 将 src 图像隐藏在 <img> 元素中，但显示其背景图像

Question

我有一个图像元素，我使用 CSS 向其添加了不同的背景图像。

img {
  background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
}

<img src="http://i.stack.imgur.com/smHPA.png" />

我想在图像元素中显示 CSS 指定的背景图像 ( the Stack Exchange logo )，而不是 src 属性 ( the Stack Overflow logo ) 指定的图像。

这可能吗？我遇到无法更改 HTML 或使用 JavaScript 的情况，因此正在寻找替代方案。

Answer 1

The object-position CSS property Chrome 和 Firefox 都支持，为这个问题提供了一个相当直接的解决方案。此属性用于偏移 native 图像在其元素内的渲染位置。该规范有帮助地指出...

Areas of the box not covered by the replaced element will show the element’s background.

...所以只要我们提供一个偏移量来确保原生图像完全超出范围，背景就会可见。例如:

img {
  object-position: -99999px 99999px;
  background-image: url('http://i.stack.imgur.com/5eiS4.png');
}

<img src="http://i.stack.imgur.com/smHPA.png" />