我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题,通过调整标签和把背景图像通过css。然而,我不知道如何去掉这段文字。我以前见过,基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题,通过调整标签和把背景图像通过css。然而,我不知道如何去掉这段文字。我以前见过,基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
当前回答
你可以使用CSS的background-image属性和z-index来确保图像保持在文本的前面。
其他回答
如果我们可以编辑标记,生活就会更简单,只需要删除文本就可以了。但有时标记是由JS代码放置的,或者我们根本不允许编辑它,糟糕的是css变成了我们唯一的武器。
我们不能使用<span>来包装文本并隐藏整个标记。顺便说一下,有些浏览器不仅隐藏带有display的元素:none,而且还禁用其中的组件。
font-size:0px和color:transparent可能都是很好的解决方案,但有些浏览器不理解它们。我们不能依赖他们。
我建议:
h1 {
background-image: url(/LOGO.png); /* Our image */
text-indent: -3000px; /* Send text out of viewable area */
height: 100px; width: 600px; /* height and width are a must, agree */
overflow:hidden; /* make sure our size is respected */
}
使用overflow:hidden强制我们的宽度和高度。一些浏览器(不会命名它们…)IE)可以将width和height读为min-width和min-height。我想防止箱子变大。
最好的答案适用于短文本,但如果文本换行,它只会显示在图像中。
一种方法是用jquery处理程序捕获错误。尝试加载一个图像,如果失败,它会抛出一个错误。
$('#logo img').error(function(){
$('#logo').html('<h1>My Website Title Here</h1>');
});
参见SAMPLE CODE
我通常使用:
span.hide
{
position:fixed;
right:-5000px;
}
答案是使用该属性创建一个span
{显示:没有;}
你可以在这个网站上找到一个例子
只需添加font-size: 0;到包含文本的元素。
.hidden {font-size: 0;} 字体大小:0;隐藏文本。<span class="hidden">你看不到我:)</span>