2024-01-11 10:00:02

使用css隐藏文本

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

<h1>My Website Title Here</h1>

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


当前回答

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

其他回答

这实际上是一个成熟的讨论领域,有许多微妙的技术可用。重要的是,你选择/开发一种技术,以满足您的需求,包括:屏幕阅读器,图像/css/脚本打开/关闭组合,seo等。

这里有一些很好的资源,让你开始使用标准化图像替换技术:

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

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

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

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

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

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

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

如果你可以使用CSS2,那么还有一些更好的方法来使用内容属性,但不幸的是,web还没有100%做到这一点。

请参阅mezzoblue,了解每种技术的优点和缺点,以及html和css示例。

用CSS替换内容

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

有这么多复杂的解决方案。

最简单的使用方法是:

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