css 用于隐藏.img替换文本的Kellum方法

Posted 2021-05-13

.hide-text {
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
  }
  
/*H5BP method*/  

.h5bp {
      border: 0;
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-90/test.png);
      width: 300px;
      height: 75px;
    }
  
/* HIDE but remain accessible for screen readers */

.visuallyhidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
} 

/* DRUPAL 7: add class="element-invisible" */
/* DRUPAL 8: add class="visually-hidden" */