使用css隐藏文本

我有一个标签在我的html像这样:

<h1>My Website Title Here</h1>

使用css我想替换文字与我的实际标志。我已经得到的标志没有问题，通过调整标签和把背景图像通过css。然而，我不知道如何去掉这段文字。我以前见过，基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。

当前回答

你可以通过添加这个属性来隐藏你的文本:

font-size: 0 !important;

其他回答

用CSS替换内容

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

如果只是为了让元素内部的文本不可见，可以使用rgba值将color属性设置为不透明度为0，例如color:rgba(0,0,0,0);干净简单。

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/

使用条件标签不同的浏览器和使用css你必须放置高度:0px，宽度:0px，你还必须放置字体大小:0px。

在CSS中，可以使用Content属性直接进行内容替换。

这似乎最常用于生成::before和::after伪元素，但也可用于替换现有HTML元素的内容。

对于最初的示例

<h1>My Website Title Here</h1>

这个CSS将用logo替换文本:

        h1 {
            content: url(mywebsitelogo.png);
            width: 100%;
        }

虽然在伪元素中，任何图像内容都不能调整大小(除非将其用作背景图像)，但对于替换的内容则不是这样。

默认情况下，图像将显示其实际大小，并在必要时展开容器，就像它包含一个实际的<img>元素一样。

在本例中，width: 100%用于将标志图像贴合到全宽度。如果需要将图像缩小到合适的位置，但如果容器比图像大，则永远不要展开，那么可以使用max-width: 100%来代替。

根据MDN的说法，目前唯一不支持CSS内容替换的普通浏览器是Internet Explorer。

推荐文章