Make a div transparent but keep the borders visible
I have a div in a shape of speech bubble. Here is the code:
<div class="dragThis" id="dragThis">
<div class="content" id="content">
<p>
<asp:Label ID="lblContent" runat="server" Text="Label"></asp:Label>
</p>
</div>
<div class="开发者_JAVA百科pointer">
<div class="one">
</div>
<div class="two">
</div>
</div>
</div>
Here is the css:
<style type="text/css">
.dragThis
{
width: 400px;
color: #efefef;
position: absolute;
}
.pointer
{
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=50);
height: 560px;
}
.dragThis .pointer
{
height: 35px;
background: #393939;
}
.dragThis .pointer div
{
height: 100%;
background: #ffffff;
}
.dragThis .pointer .one
{
width: 50%;
-moz-border-radius-topright: 35px;
-webkit-border-top-right-radius: 35px;
float: left;
}
.dragThis .pointer .two
{
width: 50%;
float: right;
-moz-border-radius-topleft: 35px;
-webkit-border-top-left-radius: 35px;
}
.dragThis .content
{
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #393939;
text-align: center;
}
</style>
The problem here is as you can see, the lower part of the speech bubble is %50 visible. I want the black part to be %100 visible and every other part to be transparent.
Thank you.
A working example would be nice.
You cannot seperate the opacity into different parts. But if your element doesn't have a background, it will be transparent, except for the borders.
Instead of opacity you could use rgba colours with the last value as 0, for example rgba(255,255,255,0). As far as I'm concerned, opacity is inherited, but the rgba values are not.
精彩评论