How do I make this CSS work to have semi-transparent border?
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>
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
Here is an option how to do this, but in this case your popup will be with the fixed size and I don't know if it's possible to make it flexible without javascript (jQuery) with only css
http://jsfiddle.net/gqQnd/13/
Without the use of a rgba background, i would recommend you to create a container containing two divs. One for the opacity, the other for plain color.
The cons are that you can't user without knowing the height and width of the div you're going to create.
But it's working in every browser :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>my super page</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
body { background:#EF9; }
.container { width:200px;height:140px; }
.container > div { width:196px; height:136px; position: absolute;}
.c-opacified { position:absolute; border:2px solid #000;opacity: 0.5;-moz-opacity: 0.5;filter:alpha(opacity=50);}
.c-plain { background:red;margin:2px;/*because we have a border: 2px */}
</style>
</head>
<body>
<div class="container">
<div class="c-opacified"></div>
<div class="c-plain"></div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论