A new tutorial on techniques and methods of CSS image replacement
This article mainly explains the "a new CSS picture replacement skills and methods tutorial", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "a new CSS picture replacement skills and methods tutorial" it!
9999 px's image replacement technology has been the best part of a decade. To replace a text element and an image, you can use the following code:
The code is as follows:
This Text is Replaced
H2
{
Background: url ("myimage") 0 0 no-repeat
Text-indent:-9999px
}
The background display of the element and its text are moved off the screen so that it does not interfere. Simple and effective. It is often used to display graphic titles-it is rarely necessary for us to have webfonts now, but you will still think it uses web.
up to now.
A new technology has been discovered:
The code is as follows:
{
Text-indent: 100%
White-space: nowrap
Overflow: hidden
}
The code indent text exceeds the width of its container, but it does not wrap and the overflow is hidden.
Although this is a smaller longer and harder to remember, it can improve performance because the browser no longer draws a 9999 px box behind the scenes. It will also prevent weird left extensions that outline the use of hidden text around links you will see.
Thank you for your reading, the above is the "a new CSS picture replacement techniques and methods tutorial" of the content, after the study of this article, I believe you on a new CSS picture replacement techniques and methods tutorial has a deeper understanding of this problem, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
