Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Color with Alpha Transparency

CSS3 defines the ability to add a level of transparency to the otherwise solid color designation. Applying alpha transparency to borders, text colors, or backgrounds allows the color of the elements behind the targeted element to bleed through or combine with what is behind it. Figure 4.1 shows the use of a transparent background color to mute the distractions created by a background image so that text can be readable.

Figure 4.1

Figure 4.1 Using a transparent background color to make solid text more readable against a background image.

The transparency in the color applies only to the parts of the element that color applies to and does not affect the transparency of elements it may contain or other objects like images. I discuss the opacity property, which applies to the visibility of an entire element, in Chapter 6.

rgba(r,g,b,a)

The r, g, and b values work on the same scale as their rgb() unit counterparts discussed earlier in this chapter. The alpha (a) value is a decimal number from 0 to 1, with 0 being completely transparent and 1 being fully opaque.

section { background-color: rgba(0,200,0,0.1); } /* very
   transparent green */

hsla(h,s,l,a)

Like rgba(), hsla() is the same color as hsl() with an added designation for alpha transparency. This unit is also a decimal number from 0 to 1.

a { background-color: rgba(0,0,0,0.9); } /* almost solid
   black */

transparent

The transparent color keyword represents a color value that is fully transparent (and thus red channel or hue designations don't matter). You can think of it as a shorthand form for (and gets computed in browsers as) rgba(0,0,0,0).

  • + Share This
  • 🔖 Save To Your Account