2024-01-11 10:00:02

使用css隐藏文本

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

<h1>My Website Title Here</h1>

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


当前回答

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

其他回答

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

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

答案是使用该属性创建一个span

{显示:没有;}

你可以在这个网站上找到一个例子

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

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

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

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

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

在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。