2

我正在尝试编写一个干净的 html5 网站。我使用html5 样板作为网站的基础。它带有modernizr。对于页面标题，我使用 text-shadow 和 font-face 并通过 modernizr 设置了一个小的 css 后备（当其中一个功能不可用时，将显示 png 图像作为背景）。

所以代码是

<h1 id="header-title">Title here</h1>

但是，正如您可能已经猜到的那样，当我将备用 png 图像设置为背景时，“Title here”文本仍然存在。你知道有什么方法可以把那个文本拿出来吗？我希望它尽可能干净。这就是为什么我没有使用任何文本缩进或 javascript 来擦除 innerHTML。

4

3 回答 3

2

使用modernizr，您可能需要一个CSS规则

body.no-fontface #header-title { 
  text-indent: -9999px; 
}

编辑

我想您可以查看此页面并进行选择：http ://css-tricks.com/css-image-replacement/

于 2010-08-14T09:57:56.267 回答
2

我相信您最好的选择是使用 Gilder/Levin 图像替换技术 - 文本保留但被图形覆盖。

谷歌似乎可以接受此链接中的讨论，只要它本质上不是欺骗性的。（并且只要您的图形与文字说明的内容相同，您就不会具有欺骗性）

http://mezzoblue.com/archives/2008/05/05/image_replac/

Mezzoblue 站点还对所有流行的图像替换技术进行了很好的总结。

这是Gilder/Levin 技术（直接从 Mezzoblue 站点复制） - 您在替换图像所在的位置添加一个空的 span 标签，并使用绝对定位将其堆叠在原始文本的顶部。现在，可能额外的 span 标签不符合您的“干净”要求，但在我看来，任何其他隐藏或删除真实文本的技术都更糟糕。

对于不能使用字体的访问者来说，最干净的解决方案可能是稍微降低体验？如果设置正确，您应该能够使用 at-font-face 吸引 99%（ish）的访问者。

<h3 id="header">
    <span></span>Revised Image Replacement
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    position: relative;
    }
#header span {
    background: url(sample-opaque.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

** 更新 **

Gilder/Levin 的一个缺点是替换图像必须是不透明的。如果它是透明的，则原始文本可能会根据图形的外观显示。

Leahy/Langridge 方法适用于透明图像（Apple将这种技术用于他们的导航菜单）——我知道的唯一缺点是，如果有人在关闭图像并打开 css 的情况下浏览，他们可能看不到任何内容。

再次，来自 Mezzoblue 网站

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    padding: 25px 0 0 0;
    overflow: hidden;
    background-image: url(sample-opaque.gif);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:25px;
    }

如果“css-on, images-off”场景失败的另一种选择是不可接受的 -单像素图像替换。该技术可以在
mezzoblue.com/tests/revised-image-replacement/中找到，
并且如另一个响应
css-tricks.com/css-image-replacement/中所述
（抱歉，链接不完整 - 我目前只允许 1 个链接每个帖子。在前面的每个 URL 的前面添加 www 以查看各种图像替换技术）

于 2010-08-14T23:06:15.873 回答
0

将文本放入 aspan并将其设置span为visibility: hidden.

于 2010-08-14T09:47:40.070 回答