HTML and CSS Reference
In-Depth Information
FIGURE 6.15
Multiple background images used to make additive icons.
The code to achieve this is very similar to what you used earlier, but it just
requires the use of additional multiple background images to include the modi-
fiers. You can see an example of this code in the file modified-icons.html in the
chapter6 code download folder. The code looks something like this (
Figure 6.15
shows the result):
ul li:nth-of-type(1) a {
background-image: url(icons/plus.png), url(icons/file.png);
}
/* Other three icons included in a very similar way to the first
p
one, but ommitted here for brevity */
ul a {
: ;
background-position: 72px 10px, 50px 10px;
background-size: 13px 13px, 20px 25px;
.
}
As you can see, you now have a set of two background images for each icon:
one for the modifier and one for the base icon. Two
background-position
s and
three
background-size
s also go along with those images.
