浅谈CSS以图换字的9种方法
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
前面的话
CSS以图换字的技术,很久都没人提起了。它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换字的9种方法
文字隐藏
在h1标签中,新增span标签来保存标题内容,然后将其样式设置为display:none
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style> h 1 { width : 64px ; height : 64px ; background : url (https:// static .xiaohuochai.site/ icon /icon_ 64 .ico); font : 12px / 1 '微软雅黑' ; } span { display : none ; } </style> <h 1 > <span>小火柴的蓝色理想</span> </h 1 > |
负缩进
通过使用text-index:-9999px,这样一个比较大的负缩进,使文本移到页面以外的区域
1 2 3 4 5 6 7 8 9 10 | <style> h 1 { width : 64px ; height : 64px ; background : url (https:// static .xiaohuochai.site/ icon /icon_ 64 .ico); font : 12px / 1 '微软雅黑' ; text-indent : -9999px ; } </style> <h 1 >小火柴的蓝色理想</h 1 > |
负margin
通过使用margin-left:-2000px,使盒模型向左偏移2000px,然后将宽度设置为2064px,从而页面中只显示2064px中64px的部分。将图片的背景设置为右对齐,且不重复
1 2 3 4 5 6 7 8 9 10 | <style> h 1 { width : 2064px ; height : 64px ; background : url (https:// static .xiaohuochai.site/ icon /icon_ 64 .ico) right no-repeat ; font : 12px / 1 '微软雅黑' ; margin-left : -2000px ; } </style> <h 1 >小火柴的蓝色理想</h 1 > |
上padding
因为背景是显示在padding-box区域中的,而文本是显示在content-box区域中。所以,将height设置为0,用padding-top来替代height,并设置overflow:hidden。则,可以只显示背景不显示文本
1 2 3 4 5 6 7 8 9 10 11 | <style> h 1 { width : 64px ; padding-top : 64px ; height : 0 ; overflow : hidden ; background : url (https:// static .xiaohuochai.site/ icon /icon_ 64 .ico); font : 12px / 1 '微软雅黑' ; } </style> <h 1 >小火柴的蓝色理想</h 1 > |
0宽高
通过新增一个span标签来保存文本内容,并将该标签的宽高设置为0,再设置溢出隐藏即可
1 2 3 4 5 6 7 8 9 10 | <style> h 1 { width : 64px ; height : 64px ; background : url (https:// static .xiaohuochai.site/ icon /icon_ 64 .ico); font : 12px / 1 '微软雅黑' ; } span{ display : block ; width : 0 ; height : 0 ; overflow : hidden ;} </style> <h 1 ><span>小火柴的蓝色理想</span></h 1 > |
文本透明
设置文本的颜色为transparent,并设置font-size为1px,即减少行高的影响
1 2 3 4 5 6 7 8 9 10 | <style> h 1 { width : 64px ; height : 64px ; background : url (https:// static .xiaohuochai.site/ icon /icon_ 64 .ico); color : transparent ; font-size : 1px ; } </style> <h 1 >小火柴的蓝色理想</h 1 > |
伪元素
使用before伪元素,content设置为图片的URL,在h1元素上设置溢出隐藏
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style> h 1 { width : 64px ; height : 64px ; overflow : hidden ; font : 12px / 1 '微软雅黑' ; } h 1: before { content : url (https:// static .xiaohuochai.site/ icon /icon_ 64 .ico); display : block ; } </style> <h 1 >小火柴的蓝色理想</h 1 > |
正缩进
设置text-indent:100%,使文本缩进到父元素宽度区域的右侧。然后配合设置white-space:nowrap和overflow:hidden,使文本不换行,并溢出隐藏。从而隐藏文本内容
1 2 3 4 5 6 7 8 9 10 11 12 | <style> h 1 { width : 64px ; height : 64px ; background : url (https:// static .xiaohuochai.site/ icon /icon_ 64 .ico); text-indent : 100% ; white-space : nowrap ; overflow : hidden ; font : 12px / 1 '微软雅黑' ; } </style> <h 1 >小火柴的蓝色理想</h 1 > |
字体大小
通过设置font-size:0,可以将字体大小设置为0
1 2 3 4 5 6 7 8 9 | <style> h 1 { width : 64px ; height : 64px ; background : url (https:// static .xiaohuochai.site/ icon /icon_ 64 .ico); font-size : 0 ; } </style> <h 1 >小火柴的蓝色理想</h 1 > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 以图换字,其实是为了保证页面的可读性,这样既有利于搜索引擎,又有利于结构查看。由于这种方式被大多数人所认同,所以方法也越来越多2010-12-25
深入分析网页CSS隐藏文字和以图换字技术-CSS教程-网页制作-网页教学网
打开电脑,感觉没有什么事可做,就随便拿起《css mastery》翻了下,刚好看倒图像替换这块,突然想起前些天曾有一网友问过该问题,就想总结出来,以便自己和网友今后参考。2008-10-17
最新评论