CODEWITHSUNDEEP
csstransparency
Pabuc
Pabuc

Reputation: 5638

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="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.

Upvotes: 1

Views: 2626

Answers (2)

oneday
oneday

Reputation: 1629

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.

Upvotes: 0

Justus Romijn
Justus Romijn

Reputation: 16019

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.

Upvotes: 1

Related Questions