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