HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

Chapter 8


Image Transparency


Contents


8.1 Irregular Shapes and Transparency........ 82
8.2 Favicon......................... 86
8.2.1 By Filename..................... 86
8.2.2 By Link........................ 87
8.2.3 Many Sizes...................... 87
8.3 Review of Tags and Attributes.......... 87

Let’s say we want to put our organization’s logo on many of our webpages.
Maybe it has a fancy shape, and is not merely square. But on webpages all
images are square (or, more accurately, rectangular).


No problem, right? We can simply color the space outside of the logo to
match the background of the webpage. It will blend in perfectly.


And that works, kind of.


There are two big problems with this approach. (1) What if we decide to
change the background color of our webpages? Do we need to make up a
new logo with the new background color? (2) What if we want to use the
logo on many different pages with many different background colors?


The solution to these and similar problems is transparency.


In chapter 5 (page 49) we introduced the basic skills of cropping and resizing
images. In this chapter we build on that knowledge by showing how to make
part of an image transparent.


81

Free download pdf