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

Markup Language - Image Replacement

Tomcat class loader implementation method and example code

jQuery simulates picker to achieve sliding selection effect

Introduction to CSS style classification (basic knowledge)

Docker image creation Dockerfile and commit operations

Markup language - specify CSS styles for text

How to add a paging navigation bar to the page through Element UI

Function overloading in TypeScript

Teach you to create custom hooks in react

Personalized and creative website design examples (30)

Detailed explanation of VUE's data proxy and events

Recommend

Detailed explanation of the deployment process of Docker Alibaba Cloud RocketMQ 4.5.1

Analysis of 2 implementation methods of configuring jnid data source in Tomcatc3p0

How to install and use Cockpit on CentOS 8/RHEL 8

How to build Git service based on http protocol on VMware+centOS 8

Solution to large line spacing (5 pixels more in IE)

Detailed explanation of the differences between var, let and const in JavaScript es6

Teach you how to deploy zabbix service on saltstack

Several methods to clear floating (recommended)

Teach you about react routing in five minutes

Nginx domain forwarding usage scenario code example

Summary of MySQL InnoDB locks

How to shrink the log file in MYSQL SERVER

Vue Virtual DOM Quick Start

MyBatis dynamic SQL comprehensive explanation

How to install grafana and add influxdb monitoring under Linux