”, as I found so many wired things when using CSS, and I think this book may be helpful for me. and I post some of patterns in the book while learning.Usage
Text Replacement pattern is a combination of Absolute pattern and Background pattern, it’s used to display an image, if the image fails to download, the text will be shown.
Implement
To implement Text Replacement pattern, we need three HTML elements, one is the container, one is used to show image, and another displays text(also you can combine the container and text together to reduce the tags). the following is the code:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>background</title>
<style type="text/css">
#h2 { position:relative; width:500px; height:100px; overflow:hidden; }
#h2 span { position:absolute; width:500px; height:100px; left:0; top:0;
background:url("500x100.png") no-repeat; }
</style>
</head>
<body>
<h1>Text Replacement</h1>
<h2 id="h2">Heading 2<span></span></h2>
</body>
this is the picture in browser:
and after the change the background image to a nonexistent image, then it looks like this:
Alternate
Yes, I know that you can use Alt attribute of img tag, like this:
<img src="500x100.png" alt="Heading 2"/>
It almost has the same effect with Text Replacement pattern, except that you can not control the text style. With Text Replacement pattern, you can decide how to display the text.
Note
This is not a complex pattern, but I think the most important part is “Combination”, you may know many CSS
properties, but can you combine them together to get a new style?
Posts
No comments:
Post a Comment