0

我正在开发一个新的响应式网站...看看 > 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;
}
4

3 回答 3

1

1) 101% 就足够了。这样做可以吗？

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

2）如果我禁用图像......我怎样才能让我的文字（H1）回来？

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

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

于 2012-10-17T10:31:18.680 回答
0

有一种 IR 技术可以在不需要额外标记的情况下禁用图像：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;
}

较旧的浏览器不理解:beforeor content，但至少他们能够看到文本。

于 2012-10-17T12:04:37.163 回答
0

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

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% 可靠的。使用辅助元素来定位也有好处，因为这意味着您可以更好地控制对文本内容的处理方式。

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

禁用图像

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

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

于 2012-10-17T11:09:04.073 回答