A new CSS image replacement technique (background display and text moving off screen) to say goodbye to 9999px

A new CSS image replacement technique (background display and text moving off screen) to say goodbye to 9999px
-9999 px image replacement technology has been popular for the best part of a decade. To replace a text element with an image, you can use the following code:

Copy code
The code is as follows:

<h1>This Text is Replaced</h1>
<style>
h1
{
background: url("myimage") 0 0 no-repeat;
text-indent: -9999px;
}
</style>

The element's background is displayed and its text is moved offscreen so that it doesn't get in the way. Simple and effective. It's often used to display graphic captions - this is rarely necessary now that we have webfonts, but you'll still find it useful when using it on the web.
Until now.
A new technology has been discovered:

Copy code
The code is as follows:

{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Code indents the text beyond the width of its container, but it does not wrap and overflow is hidden.
While this is a little longer and harder to remember, it can improve performance because the browser is no longer drawing a 9999px box behind the scenes. It will also prevent the weird left expanded outlines you'll see around links by using hidden text.

<<:  Specific use of Mysql prepare preprocessing

>>:  Some ways to solve the problem of Jenkins integrated docker plugin

Recommend

Detailed explanation of Bind mounts for Docker data storage

Before reading this article, I hope you have a pr...

Issues and precautions about setting maxPostSize for Tomcat

1. Why set maxPostSize? The tomcat container has ...

Five ways to achieve automatic page jump in HTML

In the previous article, we introduced three comm...

MySQL multi-instance configuration application scenario

Table of contents MySQL multiple instances Multi-...

Illustration of the process of using FileZilla to connect to the FTP server

When I first started setting up an ftp server on ...

What is COLLATE in MYSQL?

Preface Execute the show create table <tablena...

Install CentOS system based on WindowsX Hyper-V

At present, most people who use Linux either use ...

Pure CSS custom multi-line ellipsis problem (from principle to implementation)

How to display text overflow? What are your needs...

TypeScript decorator definition

Table of contents 1. Concept 1.1 Definition 1.2 D...

A brief discussion of 12 classic problems in Angular

Table of contents 1. Please explain what are the ...

Summary of commonly used tags in HTML (must read)

Content Detail Tags: <h1>~<h6>Title T...

How to automatically number the results of MYSQL query data

Preface In fact, I have never encountered this ki...

How to implement Vue binding class and binding inline style

Table of contents Binding Class Binding inline st...

Vue implements tree table through element tree control

Table of contents Implementation effect diagram I...

The whole process of installing and configuring Harbor1.7 on CentOS7.5

1. Download the required packages wget -P /usr/lo...