1

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

关于这种新方法的原始网站文章

看起来不错，我想练习使用它，但我不确定它的 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>

任何帮助是极大的赞赏。谢谢社区！

4

1 回答 1

0

我在搜索图像替换的实际趋势时找到了 css 图像替换博物馆。我在那里遇到了 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：另一种趋势方法是H5BP 团队提出的。我不确定要使用哪个。

于 2013-04-22T02:44:49.640 回答