WORKING WITH COLOR VALUES - HTML5 - page 71

You can use any .jpg , .gif , or .png i le for a background image. For this example, three
circles in the colors red, green, and blue are used as a background and on top are <h1> text
with 50 percent opacity to show the ef ect that dif erent colors have when viewed through a
transparent object. h e following code ( Transparent.html in this chapter's folder at www.
wiley.com/go/smashinghtml5 ) uses both rgba() and hsla() formats.

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
body {
background - image : url ( rgbBalls . png );
}
. transRed {
color : rgba ( 255 , 0 , 0 , .5 );
}
. transGreen {
color : rgba ( 0 , 255 , 0 , .5 );
}
. transBlue {
color : hsla ( 240 , 100 %, 50 %, .5 );
}
. transBackground
{
background - color : hsla ( 120 , 100 %, 50 %, .5 );
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Transparency / Opacity </ title >
</ head >
< body >
< h1 class = ”transRed” > Testing 123 , Testing 123 , Testing 123 </ h1 >
< h1 class = ”transGreen” > Testing 123 , Testing 123 , Testing 123 </ h1 >
< h1 class = ”transBlue” > Testing 123 , Testing 123 , Testing 123 </ h1 >
< h1 class = ”transBackground” > Testing 123 , Testing 123 , Testing 123 </ h1 >
</ body >
</ html >

75

h e results shown in Figure 4-6 are shown on an iPhone and they look no dif erent than what
you'll see on your a computer screen.

As you can see, the transparent text and background allow the background object to show
through. When a color is transparent, it picks up some of the underlying color; so, when you
use it, bear in mind what the combination of the underlying and overlying colors look like
together. (By the way, Figure 4-6 shows why you rarely want to use background images — they
have a way of cluttering the screen and destroying any sensibility in the text.)