css 图像替换技术

Posted 2021-05-13

TECHNIQUE 1

<h3 class="visuallyhidden">
  CSS-Tricks
</h3>

h3.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

This doesn't really replace a single element with an image, it just does a good job at hiding an element from view while remaining accessible to screen readers. 
So you could use whatever you wanted to display the image, then put an <h3 class="visuallyhidden">Title</h3> next to it.

--------------------------------------------------------------------------------

Instead of setting a large negative text-indent, you can set it to 100%.
This way the browser won’t need to create a large box and the performance will improve. 
Text is pushed on the side.
Setting overflow to hidden hides the text and whitespace: nowrap keeps it from moving onto the next line. 
The text will still be read by screen readers in this method. 

.replace-scott {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

--------------------------------------------------------------------------------
!! Elements with display set to none are ignored by screen readers. The exact same issue occurs with visibility set to hidden. 
!! What you can do is set opacity to 0. This will hide the element while still keeping it accessible to screen readers.

<h1 class="replace-display">
  <span>SitePoint</span>
</h1>

.replace-display {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-display span{
  // display: none;   //DON'T USE!!!
  
  opacity: 0; // used instead
}

--------------------------------------------------------------------------------

We set the width and height of our span element to zero. 
This forces the text inside the element to move out of its box. 
The text is then hidden by the overflow: hidden property.

.replace-overflow {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-overflow span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

The text is still accessible to screen readers. Hence, there are no accessibility issues.

--------------------------------------------------------------------------------

What not to do on with the text to not get penalized by Google
https://support.google.com/webmasters/answer/66353