图片替换博物馆

CSS 图片替换是一种将文本元素（通常是标题标签，如 <h1>）替换为图片（通常是徽标）的技术。 它起源于 Web 字体和 SVG 出现之前的时代。 多年来，Web 开发人员一直在努力克服浏览器之间的不一致，以创建能够在设计和可访问性之间取得良好平衡的图片替换技术。

现在，Web 字体和 SVG 在 Web 上的样式化文本方面承担了更多重任，这些技术的使用越来越少。 但是，我们认为有必要将它们保留在这个博物馆中，以纪念它们创造过程中的独创性，并提醒自己 Web 设计的过去。

这些演示将带您回顾 Web 图片替换的历史，追溯到 2003 年。 每个演示都附带其源代码链接（如果可用）。 现在有些代码已经失传了。

2014: H5BP 图片替换 2

来源

查看 CSS-Tricks 在 CodePen 上的示例 2014 H5BP 图片替换方法 2 (@css-tricks) 。

2012: H5BP 图片替换

来源

查看 CSS-Tricks 在 CodePen 上的示例 2012 H5BP 图片替换方法 (@css-tricks) 。

2012: Scott Kellum 方法

来源

查看 CSS-Tricks 在 CodePen 上的示例 2012 Scott Kellum 图片替换方法 (@css-tricks) 。

2010: 改进的 NIR（Nash 图片替换）

来源

查看 CSS-Tricks 在 CodePen 上的示例 2010 改进的 NIR – 图片替换方法 (@css-tricks) 。

2008: Phark 与内联图片方法

查看 CSS-Tricks 在 CodePen 上的示例 2008 Phark 与内联图片 – 图片替换方法 (@css-tricks) 。

2007: 另一种图片替换方法

来源

查看 CSS-Tricks 在 CodePen 上的示例 2007 另一种图片替换方法 (@css-tricks) 。

2006: Nash 图片替换技术

来源

查看 CSS-Tricks 在 CodePen 上的示例 2006 Nash 图片替换技术 (@css-tricks) 。

2005: Thierry 技术

来源

查看 CSS-Tricks 在 CodePen 上的示例 2005 Thierry 图片放置技术 (@css-tricks) 。

2005: Malarkey 技术

来源

查看 CSS-Tricks 在 CodePen 上的示例 2005 Malarkey 图片替换技术 (@css-tricks) 。

2003: Shea 增强

来源

查看 CSS-Tricks 在 CodePen 上的示例 2003 Shea 增强 – 图片替换技术 (@css-tricks) 。

2003: Lindsay 方法

来源

查看 CSS-Tricks 在 CodePen 上的示例 2003 The Lindsay Method – 图片替换技术 (@css-tricks) 。

2003: Glider/Levin 技术

查看 CSS-Tricks 在 CodePen 上的示例 2003 Glider/Levin 图片替换技术 (@css-tricks) 。

2003: Leon Dwyer 方法

查看 CSS-Tricks 在 CodePen 上的示例 2003 Leon Dwyer 方法 – 图片替换技术 (@css-tricks) 。

2003: Leahy/Langridge

查看 CodePen 上的 2003 Leahy/Langridge 图片替换技术，作者是 CSS-Tricks (@css-tricks)。

2003: Radu Darvas Shim

查看 CodePen 上的 2003 Radu Darvas Shim 图片替换技术，作者是 CSS-Tricks (@css-tricks)。

2003: Radu Darvas 技术

查看 CodePen 上的 2003 Radu Darvas 图片替换技术，作者是 CSS-Tricks (@css-tricks)。

2003: Phark 方法

来源

查看 CodePen 上的 2003 Phark 方法图片替换技术，作者是 CSS-Tricks (@css-tricks)。

2003: Fahrner 图片替换

来源

查看 CodePen 上的 2003 Fahrner 图片替换技术，作者是 CSS-Tricks (@css-tricks)。