HTML and CSS Reference
In-Depth Information
The simple way to convert an image to a data URI is to use an online converter, such as the one at
. You then simply replace the path to the image as the value of
url()
in the style rule like this (the code is in datauri.html):
http://dopiaza.org/tools/datauri/
ul {
list-style-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOAQMAAAAc4Q
7JAAAAA3NCSVQICAjb4U/gAAAABlBMVEXZAAD///+Q6NI6AAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAADsMAAA7DAcdv
qGQAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDUvMjcvMTJc5/NzAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3
MgQ1M26LyyjAAAABFJREFUCJlj+
P+
fAYgOMBNEAESTDSFz7scaAAAAAElFTkSuQmCC); /* red square */
list-style-type: square;
}
In a modern browser, this produces the same result as in Figure
10-9
.
IE 6 and IE 7 don't understand data
URI, so they display the default square instead. The obvious disadvantage of a data URI is that it's not human
readable, so it's a good idea to add a comment to remind yourself what the image looks like.
The CSS3
image()
■
Tip
notation described in “using negative offset with CSS Sprites” in Chapter
8
allows you
to specify image fragments. once browsers support
image()
, the need for data uRi is likely to go away.
Using Larger Images
You're not restricted to discs, circles, and squares. For example, list-style-image.html uses an image of a wine
glass as the symbol for an unordered list like this:
ul {
list-style-image: url(images/redwine.png);
}
shows, the base of the image is aligned with the baseline of the text in each item. Also, the
image is displayed at its full height, increasing the gap between list items.
As Figure
10-10
Figure 10-10.
The custom image affects the line height of the list items
