Opacity to Background only and not to Inner Text

Posted: December 9, 2010 in Asp.net

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <title>Untitled Page</title>
</head>
<style>
  .parent {
    /* Fallback for web browsers that doesn’t support RGBa */
    background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.4); /* For IE 5.5 – 7*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For Most IE */
    filter: alpha(opacity=40);
    width: 500px;

  }
  .child {
    position: relative;
    filter: alpha(opacity=100);
    width: 500px;
    color: White;
    font-weight: bold;
  }
</style>
<body bgcolor="#66ccff">
  <div class="parent">
    <div style="color:White;">
      <h1>
        <p>
        Opacity Inherited</p>
      </h1>
    </div>
    <div class="child">
      <h1>
        <p>
           Opacity OverRide</p>
      </h1>
    </div>
  </div>
</body>
<html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s