2024-01-11 10:00:02

使用css隐藏文本

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

<h1>My Website Title Here</h1>

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


当前回答

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

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

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

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

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

其他回答

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

我不记得我是在哪里学会的,但我已经成功地使用它很多年了。

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

我的mixin是在sass,但你可以使用它的任何方式,你认为合适。为了更好地度量,我通常在项目的某个地方保留一个.hidden类来附加到元素上,以避免重复。

试试这段代码来缩短和隐藏文本

.hidetxt { 宽度:346 px; 显示:表标题; 空白:nowrap;} 溢出:隐藏; 文本溢出:省略; 光标:非放; } .hidetxt:{徘徊 可见性:隐藏; } < div class = " hidetxt”> Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时</p> < / div >

或者在你的CSS类中隐藏使用。hidext{可见性:隐藏;}

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的background-image属性和z-index来确保图像保持在文本的前面。