Question

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

根据此IR技术，一切都（几乎）正在工作＆gt; www.zeldman.com

我有两个问题：

1）我仍然可以在右侧看到一点H1（Firefox / Mac）......你也是吗？它可以通过给出更多的文本缩进来隐藏...... 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％就足够了。可以吗？

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

2）如果我禁用图像......我怎样才能恢复文本（H1）？

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

例如，您需要使用Shea图像替换方法来执行此操作。请参阅以下链接的WP文章并搜索“ Shea方法”：https://en.wikipedia.org/wiki/Fahrner_Image_Replacement（此方法需要在替换的元素中包含其他元素;可以在此处使用伪元素 - 我已经从来没有尝试过）

Answer 2

这是我过去使用过的 - 它有点简单：

h1 {
  overflow: hidden;
}

h1 span {
  width: 100%;
  display: block;
  margin-left: -100%;
}

标记：

<h1>
  <span>
    My Title with lots of text so
    that if and when it wraps nothing 
    goes wrong, and I don't have to rely 
    on nowrap
  </span>
</h1>

这是因为对某些代理商的nowrap支持并非100％可靠。将辅助元素定位到目标也是有益的，因为这意味着您可以更好地控制对文本内容的处理。

你显然可以使用positivte或负边距。我更喜欢否定，因为在overflow:hidden失败的不太可能的情况下，向左移动更有可能隐藏文本内容，并且它不会导致滚动条出现。正如我所说，这取决于个人偏好。

已禁用图片

不幸的是，对于禁用/启用的图像无法帮助您，我所知道的唯一解决方案是feeela已经提出的解决方案 - 这显然不适用于透明图像：/

实际上你确实有一种可能性，那就是使用Shea method的多个背景图像。因此，您基本上会重复页面背景，然后将文本图像分层。但是，如果您有一个居中的网站，就像您一样，您必须确保可以使用background-attachment: fixed来正常工作和对齐。显然，这只适用于支持多个背景图像的浏览器......虽然你可以添加另一个元素层来伪造这种行为 - 但事情开始变得混乱。

Answer 3

有一种红外技术可以处理禁用的图像，无需额外的标记：http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/

.nir {
   height:100px; /* height of replacement image */
   width:400px; /* width of replacement image */
   padding:0;
   margin:0;
   overflow:hidden;
}

.nir:before {
   content:url(image.gif);
   display:inline-block;
   font-size:0;
   line-height:0;
}

较旧的浏览器不了解:before或content，但至少他们能够看到该文字。

新的图像替换技术（Kellum / Zeldman）布局

3 个答案:

已禁用图片