Markup Language - Image Replacement
|
Click here to return to the 123WORDPRESS.COM HTML Tutorial section. To view the CSS tutorial, please click here. Above: Markup language - assigning CSS styles to text . Chapter 14 Image Replacement As more designers and developers start using standards (especially CSS), new techniques are discovered every day, and new and better ways to achieve the same goals are constantly being developed. "Image replacement" is arguably the best example of this change, a technique that uses CSS to replace ordinary text with images. How should you use CSS to replace text with images? It is best to put all presentational (trivial or decorative) images in CSS, because this allows easy replacement of updated images without changing the markup. Also, we can be sure that all browsers and devices will interpret the markup correctly, regardless of whether there is advanced CSS that fully supports replacing text with images. This advantage is emphasized throughout this book. No Perfect Solution However, finding the "perfect" way to replace text with images using only CSS is almost like finding the Holy Grail... because it doesn't exist yet. There are only methods that work in all browsers, but they don't work with assistive technologies (such as screen readers). There are other methods that work, unless the user instructs the browser not to display any images, but enables CSS. Although there is no method that can satisfy everyone (or all users) at the time of writing this article, there are indeed many websites using this method. You must be particularly careful when applying any image replacement method, and you must also understand the side effects it will bring. It can be used, but be careful. This is the purpose of this chapter. When the convenience brought by image replacement is revealed, its shortcomings will also be exposed. As time goes by, perhaps more CSS enthusiasts will find better ways to achieve the same effect; until then, we must make good use of the techniques and weigh the pros and cons. To familiarize you with the concept of image replacement, let's look at some common methods. Let's start with the Fahrner Image Replacement (FIR) technique. Previous Page 1 2 3 4 5 6 7 Next Page Read Full Article |
<<: Detailed explanation of MySQL data grouping
>>: JS realizes special effects of web page navigation bar
Recommend
Detailed explanation of MySQL remote connection permission
1. Log in to MySQL database mysql -u root -p View...
CSS3 radar scan map sample code
Use CSS3 to achieve cool radar scanning pictures:...
MySQL installation tutorial under Windows with pictures and text
MySQL installation instructions MySQL is a relati...
Two ways to implement HTML page click download file
1. Use the <a> tag to complete <a href=&...
Detailed explanation of using new methods of html5 to manipulate element class names in JavaScript
Table of contents 1. classList attribute 2. Pract...
Detailed explanation of the difference between JavaScript spread operator and rest operator
Table of contents What is the rest operator? How ...
SQL query for users who have placed orders for at least seven consecutive days
Create a table create table order(id varchar(10),...
How to implement Ajax concurrent request control based on JS
Table of contents Preface Ajax serial and paralle...
Example of how to quickly build a Redis cluster with Docker
What is Redis Cluster Redis cluster is a distribu...
In-depth explanation of MySQL learning engine, explain and permissions
engine Introduction Innodb engine The Innodb engi...
A brief analysis of kubernetes controllers and labels
Table of contents 01 Common controllers in k8s RC...
Some useful meta setting methods (must read)
<meta name="viewport" content="...
Automatically log out inactive users after login timeout in Linux
Method 1: Modify the .bashrc or .bash_profile fil...
How to get the intersection/difference/union of two sets in mysql
Common scenarios of MySQL: getting the intersecti...
Summary of common functions and usage methods of WeChat applet development
Here, I have mainly sorted out some commonly used...