2024-01-11 10:00:02

使用css隐藏文本

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

<h1>My Website Title Here</h1>

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


当前回答

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

}

其他回答

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

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

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

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

只需添加font-size: 0;到包含文本的元素。

.hidden {font-size: 0;} 字体大小:0;隐藏文本。<span class="hidden">你看不到我:)</span>

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

font-size: 0 !important;

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