Home > Article > Web Front-end > Here are a few question-based titles based on the provided article: Formal
Overriding Inherited Opacity for Child Elements
In CSS, elements inherit opacity from their parent elements. To adjust only the parent's opacity while preserving the child's original appearance, consider the following approaches:
1. Opacity Calculations:
Opacity values are multiplicative. This means that an element with opacity 0.5 within a parent with opacity 0.6 will have an effective opacity of 0.3 (0.5 * 0.6).
Example:
<code class="css">#parent { opacity: 0.6; } #child { opacity: 1; }</code>
In this example, the #child element will appear opaque even though its parent has a translucent opacity.
2. Repositioning the Child:
If possible, move the #child element outside of the #parent element. This will prevent the child from inheriting the parent's opacity.
3. Using RGBA Colors for Child:
Instead of setting opacity directly on the parent, use RGBA colors for the child element's background, border, or font. RGBA colors specify the opacity as a fourth value:
<code class="css">#child { background-color: rgba(255, 165, 0, 0.5); }</code>
Additional Notes:
The above is the detailed content of Here are a few question-based titles based on the provided article: Formal. For more information, please follow other related articles on the PHP Chinese website!