Home/ Questions/Q 6583847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:27:45+00:00

You can play with my code here: http://jsfiddle.net/gqQnd/ Basically I want to have a

  • 0

You can play with my code here:
http://jsfiddle.net/gqQnd/

Basically I want to have a div of content to have a semi-transparent border.
The border is semi-transparent but the insider div also become semi-transparent.
I want the inner div to be white BG

Anyone has suggestion?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #transparency {filter: alpha(opacity=75);opacity:.75; -moz-opacity:.75; background-color:#ccc;border:5px solid #333; position:absolute;top:50px; left:50px;}
        #cont {background-color:#fff;filter: alpha(opacity=100);opacity:1;}
    </style>
</head>
<body>
 This is so cool way to do this
 <br />
 This is so cool way to do this
 <br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this
    <div id="transparency">
        <div id="cont">
            <div>
                This is header
            </div>
            <div>This is body</div>
        </div>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your styles for #cont are actually being applied (hence the white background, even if it is semi-transparent). The problem is that opacity is inherited, and so if you apply it to a parent element, there’s no way to stop it being applied to the child elements.

    You could use an rgba value for the border-color, but then you get dark corners in Chrome and Safari (I think), where the borders overlap. Read about it here (with workarounds).

    What about just setting an rgba background on the parent, with some padding?

    http://jsfiddle.net/Kp7JJ/

    Update: see css3please.com for cross browser support for rgba, e.g. you will need to apply a Microsoft filter in the CSS to get it to work in IE

    • 0