使用CSS隐藏文字

我在html中有这样的标签：

<h1>My Website Title Here</h1>

使用CSS我想用我的实际徽标替换文本。我已经有了徽标，可以通过调整标签的大小并通过CSS将背景图像放入其中来实现。但是，我不知道如何摆脱文本。我以前看过基本上是通过将文本从屏幕上推送来完成的。问题是我不记得在哪里看到它。

这是一种方法：

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;
}

为什么不简单使用：

h1 { color: transparent; }

只需将其添加font-size: 0;到包含文本的元素中即可。

.hidden { font-size: 0; }

  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>

跨浏览器最友好的方式是将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。

这么多复杂的解决方案。

最简单的一种就是使用：

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

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

font size: 0 !important;

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

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

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

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

为什么不使用：

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

如果您没有任何span或div元素，则它非常适合链接。

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

{display:none;}

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

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

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

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

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

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

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

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

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

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

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

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

尝试使用此代码来缩短和隐藏文本

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;
  
}

.hidetxt:hover { 

  visibility: hidden;
  
}

<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

或隐藏在CSS类中的使用 .hidetxt { visibility: hidden; }

用CSS替换内容

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

我通常使用：

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

如果我们可以编辑标记，那么生活会更轻松，只需删除文本即可开心。但是有时标记是由JS代码放置的，或者根本不允许我们对其进行编辑，但是糟糕的CSS变成了我们可以使用的唯一武器。

我们不能将<span>文字换行并隐藏整个标签。顺便说一句，某些浏览器不仅隐藏元素，display:none而且禁用其中的组件。

两者font-size:0px和color:transparent可能都是不错的解决方案，但是某些浏览器不了解它们。我们不能依靠他们。

我建议：

h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}

使用overflow:hidden强制我们的宽度和高度。一些浏览器（不会命名为IE）可能会将width和height读取为min-width和min-height。我想防止盒子变大。

在元素中font-size和line-height中使用零值对我有用：

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

要从html隐藏文本，请在css中使用text-indent属性

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/ *对于动态文本，您需要添加空格，因此您应用的CSS不会受到干扰。nowrap表示文本永远不会换行到下一行，文本继续在同一行上直到<br>遇到标签

我实现此目标的方法之一是使用:before或:after。我使用这种方法已经有好几年了，尤其适用于字形矢量图标。

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

这对我有用跨度（淘汰验证）。

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

一个适合我的解决方案：

的HTML

<div class="website_title"><span>My Website Title Here</span></div>

的CSS

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

最佳答案适用于短文本，但是如果将文本自动换行，它将仅显示在图像中。

一种方法是使用jquery处理程序捕获错误。尝试加载图像，如果图像失败，则会引发错误。

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

参见样本代码

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }