使用CSS隐藏文字

我通常使用：

span.hide
{
  position:fixed;
  right:-5000px;
}

用CSS替换内容

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

我不记得我从哪里买来的，但是已经使用了很多年了。

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

我的mixin处于混乱状态，但是您可以按照自己认为合适的任何方式使用它。为了达到良好的效果，我通常.hidden在项目中的某个地方放置一个类，以附加到元素上以避免重复。

如果仅是为了使元素内的文本不可见，则使用rgba值（如color:rgba(0,0,0,0);clean和simple）将color属性设置为0不透明。

实际上，这是一个值得讨论的领域，可以使用许多微妙的技术。选择/开发满足您需求的技术很重要，包括：屏幕阅读器，图像/ css /脚本开/关组合，seo等。

以下是一些很好的资源，可帮助您开始使用Standardista图像替换技术：

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

上面的方法在最新的Thunderbird中也很好用。

您可以使用css background-image属性，并z-index确保图像停留在文本的前面。

使用条件为标记不同的浏览器，并使用CSS，你有地方 height:0px和width:0px你也必须到位font-size:0px。

答案是使用该属性创建跨度

{display:none;}

您可以在此站点上找到示例

您只需添加以下属性即可隐藏文本：

font size: 0 !important;

不使用{ display:none; }它使内容不可访问。您希望屏幕阅读器看到您的内容，并通过用图像（例如徽标）替换文本来视觉化其样式。通过使用text-indent: -999px;或类似的方法，文本仍然存在-只是视觉上没有。使用display:none，文本消失了。

这么多复杂的解决方案。

最简单的一种就是使用：

color:rgba(0,0,0,0)

跨浏览器最友好的方式是将HTML编写为

<h1><span>Website Title</span></h1>

然后使用CSS隐藏跨度并替换图像

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

如果可以使用CSS2，则可以使用一些更好的方法来使用该content属性，但是不幸的是，网络还没有100％可用。

隐藏文字时要注意可访问性：

除了其他答案，这是隐藏文本的另一种有用方法。

这种方法有效地隐藏了文本，但仍使其对于屏幕阅读器可见。这是一个考虑是否可访问性的选项。

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

值得指出的是，此类当前在Bootstrap 3中使用。

如果您有兴趣阅读有关可访问性的信息：

• 网络无障碍倡议（WAI）

• MDN可访问性文档

Jeffrey Zeldman建议以下解决方案：

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

它应该比 -9999px;

请在这里阅读所有内容：

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

请参阅mezzoblue，以获取每种技术的不错摘要，并介绍其优缺点，以及示例html和css。

为什么不简单使用：

h1 { color: transparent; }

这是一种方法：

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

这是另一种隐藏文本的方法，同时避免了浏览器将创建的9999像素大框：

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}