前面的话

  CSS以图换字的技术,很久都没人提起了。它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换字的9种方法

 

文字隐藏

  在h1标签中,新增span标签来保存标题内容,然后将其样式设置为display:none

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 '微软雅黑';
    }
    span {
      display: none;
    }
  </style>
  <h1>
    <span>小火柴的蓝色理想</span>
  </h1>