How to Stop Opacity Inheritance on CSS
- 1). Write a CSS rule for a new parent element. The following example creates a new rule named #myParentElement. The rule assigns it to an absolute position of 100 pixels down from the top of the page, 50 pixels in from the left of the page and places 30 pixels of padding around the child element. Using the padding property is crucial as it will eventually represent the transparent component of the parent element while centering the child element.
#myParentElement {
position: absolute;
top: 100px;
left: 50px;
padding: 30px;
} - 2). Assign a transparency property to the #myParentElement rule. This example uses the CSS background property's RGBA value to style a partially transparent background for the parent element. As opposed to the opacity property, the RGBA opacity setting is not automatically passed down to child elements. The value accepts four settings. The first three settings establish the individual components of red, green and blue. The fourth setting determines the opacity on a scale of .1 to 1. In this example the red and green settings are left at zero while the blue setting is placed at 10 and the opacity is set to .5. This will create a transparent overlay using a gray screen.
#myParentElement {
position: absolute;
top: 100px;
left: 50px;
padding: 30px;
background: rgba(0, 0, 10, 0.5);
} - 3). Write a CSS rule for the child element. In this example the #myChildElment rule simply contains black text on a white background. This element will not inherent the .5 opacity value from the #myParentElment rule.
#myChildElement {
background: white;
color: black;
} - 4). Apply the CSS to the HTML document. The CSS styles a child div (website element) with black writing on a white background. This div that is placed inside of the parent div. The parent div has a 30-pixel (due to the padding property), partially-transparent gray boundary. The parent div's transparency is not inherited by the child div.
<div><div>The text for the child div goes here.</div></div>
Source...