我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题,通过调整标签和把背景图像通过css。然而,我不知道如何去掉这段文字。我以前见过,基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题,通过调整标签和把背景图像通过css。然而,我不知道如何去掉这段文字。我以前见过,基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
当前回答
我不记得我是在哪里学会的,但我已经成功地使用它很多年了。
=hide-text()
font: 0/0 a
text-shadow: none
color: transparent
我的mixin是在sass,但你可以使用它的任何方式,你认为合适。为了更好地度量,我通常在项目的某个地方保留一个.hidden类来附加到元素上,以避免重复。
其他回答
在元素中使用0值的字体大小和行高对我来说是有用的:
<style>
.text {
display: block;
width: 200px;
height: 200px;
font-size: 0;
line-height: 0;
}
</style>
<span class="text">
Invisible Text
</span>
你可以使用CSS的background-image属性和z-index来确保图像保持在文本的前面。
为什么不用:
<li><a href="#">bla</a></li>
a {
opacity: 0.0;
font-size: 1px;
}
li {
background-image: url('test.jpg');
}
如果你没有任何span或div元素,它可以完美地用于链接。
只需添加font-size: 0;到包含文本的元素。
.hidden {font-size: 0;} 字体大小:0;隐藏文本。<span class="hidden">你看不到我:)</span>
这实际上是一个成熟的讨论领域,有许多微妙的技术可用。重要的是,你选择/开发一种技术,以满足您的需求,包括:屏幕阅读器,图像/css/脚本打开/关闭组合,seo等。
这里有一些很好的资源,让你开始使用标准化图像替换技术:
http://faq.css-standards.org/Image_Replacement
http://www.alistapart.com/articles/fir
http://veerle.duoh.com/blog/links/#l-10