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
Simple usage of MySQL temporary tables
MySQL temporary tables are very useful when we ne...
Detailed explanation of software configuration using docker-compose in linux
Preface This article will share some docker-compo...
MySQL 5.7.18 installation tutorial under Windows
This article explains how to install MySQL from a...
JS realizes the calculation of the total price of goods in the shopping cart
JS calculates the total price of goods in the sho...
A troubleshooting experience of centos Docker bridge mode unable to access the host Redis service
background: I have done a project before, which r...
Definition and function of zoom:1 attribute in CSS
Today I was asked what the zoom attribute in CSS ...
MySQL 8.0.12 installation and environment variable configuration tutorial under win10
Installation, configuration, startup, login and c...
Linux CentOS6.9 installation graphic tutorial under VMware
As a technical novice, I am recording the process...
Use Docker to run multiple PHP versions on the server
PHP7 has been out for quite some time, and it is ...
How to quickly modify the host attribute of a MySQL user
When you log in to MySQL remotely, the account yo...
VMware Workstation Pro installs Win10 pure version operating system
This article describes the steps to install the p...
The difference between hash mode and history mode in vue-router
vue-router has two modes hash mode History mode 1...
Shell script builds Docker semi-automatic compilation, packaging and release application operations
The Docker publishing method provides many conven...
Build a Scala environment under Linux and write a simple Scala program
It is very simple to install Scala environment in...
WeChat applet realizes linkage menu
Recently, in order to realize the course design, ...