html - 新图像替换技术 (Kellum/Zeldman) 布局

Question

我正在开发一个新的响应式网站...看看> www.living-heart.nl/txp 的主页

一切(几乎)都在根据这种 IR 技术工作 > www.zeldman.com

我有两个问题:

1) 我仍然可以在右侧看到一点点 H1 (Firefox/Mac) ... 你也是吗？它可以通过给 H1 更多文本缩进来隐藏……101% 就足够了。这样可以吗？

2) 如果我禁用图像......我怎样才能取回我的文本 (H1)？

谢谢你帮助我。

/* New Image Replacement > http://wp.me/p4WtR-2xq */
hgroup {
    padding: 1em 0 0 0;
}
h1 {
    font-family: lavanderia_sturdysturdy, cursive;
    color: #fff;
    font-size: 4em;
    line-height: 100%;
    background: url(../design/living-heart_logo-05.gif) no-repeat center 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 1.2em;
}
h2 {
    text-align: center;
    font-size: 2.8em;
    color: #6d8677;
    line-height: 1.2em; /* 120% van 16px */
    margin-bottom: 0;   
    font-family: 'IM Fell English', Georgia, Times, "Times New Roman", serif;
}

Answer 1

1) 101% is enough. Is that OK to do?

我总是使用 text-indent: 110%;;只是为了确保它有效(有时当值为 100% 时，在放大页面时可以看到文本)

2) If I disable images ... how can I get my text (H1) back?

使用这种替换技术无法做到这一点。

例如，您需要使用 Shea 图像替换方法来执行此操作。请参阅以下链接的 WP 文章并搜索“Shea 方法”:https://en.wikipedia.org/wiki/Fahrner_Image_Replacement (此方法需要在替换的元素中添加一个元素；可以在此处使用伪元素——我从未尝试过)