Use CSS to hide the normally displayed HTML text and use an image instead. So that any user's browser can see the replaced image as long as it supports CSS, and the user's browser that does not support CSS can only see common text.
Html Code :
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">
CSS code:
/* When the peripheral attributes of common elements are missing from margin and padding, the default value is 0 */body, DD, DL, DT, embed, fieldset, form, H1, H2, H3, h4, H5, H6, IMG, Li, object, ol, P, UL {margin: 0; Border: 0 none # FFF; padding: 0 ;}body {padding: 20px; /* padding attribute setting */background-color: # ddeeff;/* body background color */background-image: URL (images/body_bg.jpg ); /* background image of the body */background-repeat: Repeat-X;/* tiled mode of the background image: horizontal repetition */color: #000; /* specify the text color. */Font-size: 75%;/* set the font size to a percentage value based on the parent element. */Line-Height: 1.4em;/* set the line spacing (Row Height) */font-family: Arial, Helvetica, sans-serif;/* specifies the font family of the elements, select the priority level from left to right */} H1 {/* H1 as the relative position. If the parent element has a relative seat,/*, for any element inside it that has a data pair position, their origin coordinates are based on parent elements with relative locations/*. Therefore, set the left and top coordinates of the span in H1 to 0, it means that in the upper left corner of H1 */position: relative; width: 389px; Height: 43px; overflow: hidden;/* The overflow attribute specifies what happens when the content overflows the element box, if the property value is hidden, the overflow content will be trimmed and invisible */font-size: 175%; line-Height: 43px; text-transform: uppercase; /* The text-transform attribute controls the case sensitivity of text. If the attribute value is uppercase, only uppercase letters are allowed. */} H1 span {position: absolute; left: 0; top: 0; Z-index: 10;/* set the stacking sequence of elements in the Z-index attribute, its value can be positive or negative Positive. If it is positive, it is closer to the user. If it is negative, it indicates it is farther away from the user */width: 100%; /* the width and height attributes are set to 100% and can be automatically expanded to the same size as the parent element H1 */height: 100%; Background-image: URL (images/title_snow.gif ); /* background image of the span element */background-repeat: No-Repeat;/* tiled mode of the background image: display only once */} p {width: 40em; margin-top: 1.5em;/* set the top margin of the element in the margin-top attribute */}Browsing:
1. view images when using the Firefox browser and supporting the image display function
2. view images when the image display function is disabled in Firefox
Attachment: two background images on the page
SPAN element background image:
H1 background image:
Reference: The Art & Science of CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
