WEB STANDARDS CREATIVITY

116
Now I’ll create a 1-by-1-pixel image in Photoshop. I fill the image with a shade of light blue and set the layer to 70% opacity.
Finally, I save the image using Photoshop’s PNG-24 setting, enabling transparency. Then I simply use this image as the background
for the overlay, instead of the solid gray you see in Figure 5-6.
#feature-content {
position: absolute;
bottom: 0;
left: 0;
height: 125px;
width: 720px;
background-image: url('transparent.png');
}
The result is quite similar to the original, but with the HTML and CSS text, it becomes more flexible, as shown in Figure 5-7.
Figure 5-7. Adding transparency via the PNG image format nearly duplicates the www.simplygingeroot.com style.