我有一个标签在我的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类来附加到元素上,以避免重复。
其他回答
请参阅mezzoblue,了解每种技术的优点和缺点,以及html和css示例。
<style>
body {
visibility:hidden
}
body .moz-signature p{
visibility:visible
}
</style>
以上在最新的雷鸟也工作得很好。
试试这段代码来缩短和隐藏文本
.hidetxt { 宽度:346 px; 显示:表标题; 空白:nowrap;} 溢出:隐藏; 文本溢出:省略; 光标:非放; } .hidetxt:{徘徊 可见性:隐藏; } < div class = " hidetxt”> Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时</p> < / div >
或者在你的CSS类中隐藏使用。hidext{可见性:隐藏;}
隐藏文本与可访问性:
除了其他答案之外,还有另一种有用的隐藏文本的方法。
此方法有效地隐藏了文本,但允许它对屏幕阅读器保持可见。如果需要考虑可访问性,可以考虑这个选项。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
值得指出的是,这个类目前在Bootstrap 3中使用。
如果你对无障碍阅读感兴趣:
无障碍网页计划(WAI) MDN易访问性文档
答案是使用该属性创建一个span
{显示:没有;}
你可以在这个网站上找到一个例子