【问题标题】：How to use the new image replacement technique by Scott Kellum如何使用 Scott Kellum 的新图像替换技术
【发布时间】：2015-02-17 17:48:29
【问题描述】：

我正在练习使用各种图像替换方法，最近看到了几篇文章，讨论了 Scott Kellum 提出的一种新的、据说更有效的方法。

Original website article regarding this new method

看起来不错，我想练习使用它，但我不确定它的 html 和 css 应该是什么。因此，在下面的示例中，我有一个 h1，其中包含示例徽标文本。然后我在我的 h1 中添加了一个 .hide-text 类，并用 CSS 对其进行了样式设置。我使用了我制作的 Photoshop 徽标图像并将其设置为背景图像....图像的宽度为 203 像素，高度为 57 像素。

问题 1： 当我在浏览器中测试我的代码时，一切似乎都运行良好，但是我对 Mr.Kellum 的图像替换技术的使用是否正确？

问题 2： 我应该以 css 中的 h1 为目标并声明宽度和高度，还是可以像下面的示例一样直接在隐藏文本类中包含宽度和高度？

<style>
.hide-text {
    background: url(images/mylogo.jpg) 0 0 no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 203;
    height: 57px;
    }

<body>
<h1 class="hide-text">MyLogo text</h1>
</body>

非常感谢任何帮助。感谢社区！

【问题讨论】：

标签： image replace

【解决方案1】：

我在搜索图像替换的实际趋势时发现了the css image replacement museum。我在那里遇到了 Scott Kellum 方法。之后我发现了这个问题——所以我不是使用这种技术的专家——我想分享一下我的看法。

从上面的链接复制粘贴的实现

简单，也发布在问题上。

<h3 class="skm">CSS-Tricks</h3>

CSS

h3.skm {
  width: 300px;
  height: 75px;
  background: url(test.png);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

按照我的意愿实施

我已阅读原始文章，我认为最好将 css 代码拆分以实现可重用性。也许我们会用不止一个元素的图片来替换。

<h1 class="ir">An awesome pretty title</h1>
<h2>Some words here not replaced with images<h2>
<nav>
   <!-- some links replaced with images that also use css sprites -->
   <a class="ir" href="#">home</a>
   <a class="ir" href="#">sweet</a>
   <a class="ir" href="#">home</a>
</nav>

重用 ir 类进行图像替换技术，正如您在问题上链接的帖子中所建议的那样，可以保持整洁。

.ir {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
h1 {
  background-image: url('/the-title-replacement.png'');
  width: /*the-image-width*/px;
  height: /*the-image-height*/px;
}
nav a {
  background-image: url('/the-menu-icons-sprite.png');
  width: 24px;
  height: 24px;
}
nav a { background-position: 0 0; }
nav a + a { background-position: 0 24px; }
nav a + a + a { background-position: 0 48px; }

结论

必须为每个替换元素设置图像 url 和大小。如果我们使用精灵，每个元素的背景位置也会起作用，尽管元素大小通常在所有元素之间共享。

所有这些用例都可以受益于拆分 css 代码，保持样式表更整洁。

注意：我已经为纯 css 实现提出了这些想法。使用 css 预处理器 - 例如 less 例如 - 会改变规则。

注意 2：另一种趋势方法是 proposed by the H5BP team。我不确定要使用哪个。

【讨论】：