This time I will bring you various methods of using images to replace words in CSS. What are the precautions for using images to replace words in CSS? The following is a practical case, let’s take a look.
The previous words
No one has mentioned the CSS technology of replacing words with pictures for a long time. It is a technique that uses images to replace text elements within h1 tags, giving the page a balance between design and accessibility. This article will introduce in detail 9 ways to replace words with images in CSShidden text
In the h1 tag, add a span tag to save the title content, and then add it The style is set to display:none
<style>
h1 {
width: 64px;
height: 64px;
background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
font: 12px/1 '微软雅黑';
}
span {
display: none;
}
</style>
<h1>
<span>小火柴的蓝色理想</span>
</h1>negative indent
By using text-index:-9999px, such a relatively large negative indent moves the text Area outside the page <style>
h1 {
width: 64px;
height: 64px;
background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
font: 12px/1 '微软雅黑';
text-indent:-9999px;
}
</style>
<h1>小火柴的蓝色理想</h1>Negative margin
Offset the box model 2000px left by using <style>
h1 {
width: 2064px;
height: 64px;
background: url(https://static.xiaohuochai.site/icon/icon_64.ico) right no-repeat;
font: 12px/1 '微软雅黑';
margin-left:-2000px;
}
</style>
<h1>小火柴的蓝色理想</h1>padding
because the background is displayed in the padding-box area, and the text is displayed in in the content-box area. So, set height to 0, replace height withpadding-top, and set overflow:hidden. Then, you can only display the background without displaying the text
<style>
h1 {
width: 64px;
padding-top: 64px;
height:0;
overflow:hidden;
background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
font: 12px/1 '微软雅黑';
}
</style>
<h1>小火柴的蓝色理想</h1>0 width and height
Save the text content by adding a span tag and set the width and height of the tag is 0, then set the overflow to hide <style>
h1 {
width: 64px;
height: 64px;
background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
font: 12px/1 '微软雅黑';
}
span{display:block;width: 0;height:0;overflow:hidden;}
</style>
<h1><span>小火柴的蓝色理想</span></h1>Text transparent
Set the color of the text to transparent, and set the font-size to 1px, that is, reduce the line height Impact <style>
h1 {
width: 64px;
height: 64px;
background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
color:transparent;
font-size:1px;
}
</style>
<h1>小火柴的蓝色理想</h1>Pseudo element
Use the before pseudo element, set content to the URL of the image, and set overflow hiding on the h1 element <style>
h1 {
width: 64px;
height: 64px;
overflow: hidden;
font: 12px/1 '微软雅黑';
}
h1:before {
content: url(https://static.xiaohuochai.site/icon/icon_64.ico);
display: block;
}
</style>
<h1>小火柴的蓝色理想</h1>Positive indent
Set text-indent:100% to indent the text to the right of the width area of the parent element. Then set <style>
h1 {
width: 64px;
height: 64px;
background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
font: 12px/1 '微软雅黑';
}
</style>
<h1>小火柴的蓝色理想</h1>Font size
By setting font-size:0, the font size can be set to 0 <style>
h1 {
width: 64px;
height: 64px;
background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
font-size:0;
}
</style>
<h1>小火柴的蓝色理想</h1>How to use the CSS weird box model and standard box model
Detailed explanation of the transform function in CSS3
The above is the detailed content of Multiple ways to replace words with images in CSS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
