按照我的方式实施

Question

我正在练习使用各种图像替换方法，最近发现了几篇文章讨论了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并声明宽度和高度，还是可以直接在hide-text类中包含宽度和高度，如下例所示？

<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>

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

Answer 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; }

结论

图片网址＆amp;必须为每个替换元素设置大小。如果我们使用精灵，背景位置也会对每个元素起作用，尽管元素大小通常在所有元素之间共享。

所有这些用例都可以从分割css代码中受益，使样式表保持整洁。

注意：我已经为纯粹的CSS实现做了这些想法。使用css预处理器（例如较少）会更改规则。

注意2 ：另一种趋势方法是proposed by the H5BP team。我还没有决定使用哪个。

如何使用Scott Kellum的新图像替换技术

1 个答案:

从上面的链接中复制粘贴的实施

按照我的方式实施

结论