Image replacement text with CSS

tags: CSS

Introduce the method of Gilder/Levin

<h2>
     <span></span>Hello World 
</h2>

<style type="text/css">
h2 {
	width: 150px;
	height: 35px;
	position: relative;
}
h2 span {
	background: url(hello_world.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}
</style>

First, set the position of H2 to relative , which will make the position of H2 in H2 as the reference, then position the SPAN element absolutely, fill the entire H2 area, and apply the background image to the SPAN tag. The principle is to overlay the SPAN tag on the text content. Once the background image in SPAN cannot be displayed, the text content of the lower layer will be displayed without affecting normal use. However, this method also has a drawback, that is, the background image cannot be transparent, otherwise the following text will be revealed.

Intelligent Recommendation

Echarts Add a picture, text and image replacement location

First, add a picture Look at Legend "Data Data processing Add ICON: 'Image: //./img/ Alarm .png' will 'Question 1' Replace{name: 'title 1', icon: 'image: //./img/ Alarm .png'} Code: Effect: Secon...

CSS centers the image and text vertically

This question is a bit embarrassing, it took a long time to get it. I am not good at CSS, at least in the layout of this piece is still a mess. I don't know if I know too much about the android layout...

CSS realizes image and text mixing

...

CSS sets the background of the text to an image

CSS3-Set the background of the text as an image 1. Effect Picture 2. Knowledge explanation Mainly applied to css3background-clipwithtext-fill-color,note:text-till-color:transparentYeswebkit kernelPriv...

css text image vertically centered

Both pictures and text need to be styled: vertical-align: middle; to ensure vertical centering (the code is a small program, change the view to div and image to img)...