我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题,通过调整标签和把背景图像通过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。