Why does opacity make a whole element translucent instead of just its background?

opacity applies to the element as a whole, including its rendered contents, rather than just its background. [S1] So when you lower the card’s opacity, its text and other contents appear translucent too. If you want a translucent background but readable, normally opaque text, use an alpha channel in the background color instead. [S1]

For example, assuming the card contains a heading and paragraph, compare these two styles:

<div class="card faded-as-a-whole">
  <h2>Delivery details</h2>
  <p>Choose a delivery window.</p>
</div>

<div class="card translucent-background">
  <h2>Delivery details</h2>
  <p>Choose a delivery window.</p>
</div>

.faded-as-a-whole {
  background: navy;
  opacity: 0.5;
}

.translucent-background {
  background: rgb(0 0 128 / 50%);
}

In the first card, both the navy background and its contents look faded. In the second, the background color is translucent while the heading and paragraph retain their normal opacity. The exact appearance depends on what is behind the card.

The / 50% is the color’s alpha value: it makes that background color translucent. [S1] Think of the background color as the part you want to soften, and leave the element’s opacity property alone when its text should stay undimmed.

Here is a practical swap. If your existing rule is:

.card {
  background: navy;
  opacity: 0.5;
}

change it to:

.card {
  background: rgb(0 0 128 / 50%);
}

The second rule applies transparency to the background color, not to the card and its contents as a group. [S1] The percentage is a starting point, not a guarantee that text will be easy to read in every design: check the result against the actual page behind the card.

You can use both, but they affect different things: the alpha value makes the background color translucent, and opacity affects the element and its contents together. [S1] So adding a lower opacity to a card with an alpha background will also make its text look translucent. If the goal is a faint background with solid-looking text, use the background alpha alone and adjust that value instead.

For instance, start with:

.card {
  background: rgb(0 0 128 / 25%);
}

If that still looks too strong over your page, try a lower background alpha. Check it in the context where the card appears, since the colors behind it affect what you see. This example explains the visual distinction; it does not establish how readable a particular color combination will be.

First, check whether the element or one of its containing elements still has an opacity value below 1; that property affects the rendered contents of the element it is applied to. [S1] Then check the background rule itself: it should use a color with an alpha value if only the background should be translucent. If the text still seems hard to distinguish, inspect the actual page background behind the card and adjust the design as needed.

A reusable before-and-after check:

1. Find the rule setting opacity and remove it if you want the text to stay undimmed.
2. Set the translucent color on background using an alpha channel.
3. Look at the card over its real surrounding content and confirm the text looks as intended.

One limit to keep in mind: the cited guidance explains what opacity affects and how to make a background translucent; it does not determine whether a specific design is readable or provide a universal ideal alpha value. [S1]