How to Stop Opacity Inheritance on CSS

Written by max power
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Stop Opacity Inheritance on CSS
The CSS opacity property allows Web designers to apply special effects to websites. (Hemera Technologies/AbleStock.com/Getty Images)

Web designers use Cascading Style Sheet (CSS) rules to establish the opacity of a website element. The CSS opacity property allows the designer to create a glasslike effect where the Internet user sees through the website element to the background element that sits behind it. One problem is the property's values are inherited automatically by child elements. Avoid the issue by appyling opacity settings to the CSS background property's RGBA value. These values are not automatically inherited by child elements.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 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 centring the child element.

    myParentElement {

    position: absolute;

    top: 100px;

    left: 50px;

    padding: 30px;

    }

  2. 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 grey screen.

    myParentElement {

    position: absolute;

    top: 100px;

    left: 50px;

    padding: 30px;

    background: rgba(0, 0, 10, 0.5);

    }

  3. 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;

    colour: black;

    }

  4. 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 grey boundary. The parent div's transparency is not inherited by the child div.

    <div id="myParentElement"><div id="myChildElement">The text for the child div goes here.</div></div>

Tips and warnings

  • The RGBA background is supported by the Firefox, Safari, Chrome and Internet Explorer 9 browsers. To create compatibility with older versions of Internet Explorer, Web designers should use the Microsoft gradient filter property (filter: progid:DXImageTransform.Microsoft.gradient) in addition to the RGBA property (see References).

Don't Miss

Resources

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.