How do I make this CSS work to have semi-transparent border?


Tags: css,transparency

Problem :

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>


Solution :

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


    CSS Howto..

    How can I limit Bootstrap column to a specific column's height?

    How can I vertically centre bullets that bracket headers

    How to remove and override CSS attribute from parent class?

    How to get menu text vertically aligned with inherited height

    How can I add a transition for this growing div?

    “show/hide” a div with javascript not jquery, and not with display:none

    CSS Sub Menu shows up outside body

    Show a box with text when hovering an image

    How to apply External CSS to Html Helper Class Elements?

    How to remove the dots from custom menu with CSS

    Styling Tables - How to use column groups to modify TH tag located in that column

    How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

    Jquery - How to alternate an :Odd :Even pattern every 4 ?

    How do I change the font colour of text nested within a placeholder of an input search [duplicate]

    How do I refactor my CSS? [duplicate]

    How can i make it through using bootstrap grid?

    How to increase rotate value

    How to wrap entire line with overline and underline , until the end of the line ?

    How animate stacking divs in javascript/css?

    show loading image before the content loads through jquery or ajax

    How can I get a CSS table DIV to be constrained inside another DIV?

    How can I make sure that the footer will always be on the bottom of the last page when printing out?

    How to hide text present inside search box?

    How to position the GWT dialog to the bottom right corner of the browser?

    How can i fill a paragraph (until end of line) with dashes using CSS

    How to create a horse-shoe-like gauge using CSS

    HTML5 / CSS| How do I disable responsivity when a scroll bar appears?

    How to Centre a Page Layout With HTML/CSS?

    how to rotate text with css? transform is not supported by current schema?

    Unordered List Navigation Bar: How to I make some buttons go to the right of the navigation page?