How is transparency achieved in CSS3?

Question

Options

• AUsing the opacity property.
• BUsing the transparent keyword in the color property.
• CUsing the rgba() function.
• DBoth A and C are correct.

• A
  4% (2)
• B
  2% (1)
• C
  6% (3)
• D
  88% (42)

Explanation

Option D is correct because CSS3 provides two distinct mechanisms for achieving transparency: the opacity property (A) and the rgba() function (C), and both are valid approaches used in practice.

• A (opacity) sets the transparency level of an entire element and all its children, using a value from 0 (fully transparent) to 1 (fully opaque) - e.g., opacity: 0.5.
• C (rgba()) applies transparency only to a specific color value (fill, border, background, etc.) via its alpha channel - e.g., background: rgba(255, 0, 0, 0.5) - leaving child elements unaffected.
• B is a distractor: transparent is a valid CSS keyword, but it produces full transparency (equivalent to rgba(0,0,0,0)), not a controllable transparency level - making it too limited to count as a general transparency mechanism.

Memory tip: Think of opacity as a window tint (affects everything behind the glass) and rgba() as tinted paint (colors only what you paint). Both create transparency, just at different scopes.

No community discussion yet for this question.