css 隐藏文字（现代解决方案）

Posted 2021-05-13

<h1 class="hide-text show-image">Hide this text better!</h1>

<!-- 
See more at: https://www.appnovation.com/blog/modern-approach-css-image-replacement#sthash.3UP4NRSo.dpuf 
-->

.show-image {
  width: 40px;
  height: 40px;
  background: url(../images/my-title-image.png);
}

.hide-text {
  text-indent: 100%; /* get out of the window */
  white-space: nowrap; /* don't come back in */
  overflow: hidden; /* no really, don't come back in */
}
/* 
See more at: https://www.appnovation.com/blog/modern-approach-css-image-replacement#sthash.3UP4NRSo.dpuf 
*/