我的html中有一个标记,如下所示:
My Website Title Here
使用CSS我想用我的实际徽标替换文本.通过调整标签大小并在via css中放置背景图像,我的徽标没有问题.但是,我无法弄清楚如何摆脱文本.我之前已经看过它,基本上是将文本从屏幕上移开.问题是我不记得我在哪里看到它.
这是一种方式:
h1 {
text-indent: -9999px; /* sends the text off-screen */
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
white-space: nowrap; /* because only the first line is indented */
}
h1 a {
outline: none; /* prevents dotted line when link is active */
}
这是隐藏文本的另一种方法,同时避免浏览器将创建的巨大的9999像素框:
h1 {
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
/* Hide the text. */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
为什么不简单地使用:
h1 { color: transparent; }
只需添加font-size: 0;到包含文本的元素即可.
.hidden { font-size: 0; } font-size: 0; hides text. You can't see me :) 最跨浏览器的友好方式是将HTML编写为
Website Title
然后使用CSS隐藏跨度并替换图像
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
如果你可以使用CSS2,那么有一些更好的方法使用该content属性,但不幸的是,网络还不是100%.
除了其他答案,这是另一种隐藏文本的有用方法.
此方法有效地隐藏文本,但允许其对屏幕阅读器保持可见.这是一个考虑可访问性是否值得关注的选项.
.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辅助功能文档
Jeffrey Zeldman提出以下解决方案:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
它应该比资源密集度低 -9999px;
请在这里阅读所有相关内容:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
请参阅mezzoblue,了解每种技术的优点,包括优点和缺点,以及示例html和css.
这么多复杂的解决方案
最简单的就是使用:
color:rgba(0,0,0,0)
不要使用{ display:none; }它会使内容无法访问.您希望屏幕阅读器能够看到您的内容,并通过用图像(如徽标)替换文本来对其进行视觉设计.通过使用text-indent: -999px;或类似的方法,文本仍然存在 - 只是在视觉上没有.使用display:none,文字消失了.
您可以使用css background-image属性并z-index确保图像保留在文本前面.
以上在最新的Thunderbird中运行良好.
你为什么不用:
如果您没有任何span或div元素,它对链接非常有效.
京公网安备 11010802040832号 | 京ICP备19059560号-6 