Making a transparent box with CSS

Question

I am trying to make an transparent box on the background of container, however, I am not able to make it in the middle of the background, instead, when I am trying to use the top-margin to achieve my design, it will move the background image down also, so I would like to ask why I cannot make it like the example given by W3C in http://www.w3schools.com/Css/tryit.asp?filename=trycss_transparency

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01   Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <META http-equiv="Content-Type" Content="text/html; Charset=UTF-8">
    <title>
        Portal
    </title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="load()">
    <div id="header">
        <img src="images/logo.gif" id="logo" alt="Logo"/>
        <a href="http://www.google.com">
            <img src="images/a.png" id="logo2" align="right" alt="logo"/>
        </a>
    </div> 
    <div id="container">
        <div id="function"></div>
        <div id="Display"></div>
        <div id="View"></div>
    </div>
    <div id="footer">
    </div>
</body>
</html>

Here is the CSS file:

body{
font-size:100%;
margin: 0em 9em 0em 9em;
}

#header{
width:55em;
height:2.375em;
background:black;
border: 0em 0em 0em 0em;
}

#logo{
padding: 0em 0em 0em 2em;
}

#logo2{
width:3.618em;
height:2.3em;
margin: 0.1em 0.25em 0.1em 0em;
}

#container{
width:55em;
height: 36.25em;
background-image:url("images/background1.jpg");
margin: 0.25em 0em 0em 0em;
}

#function{
width:35em;
height:32.625em;
margin: 2em 10em;
background-color: #ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}

#footer{
font-family:"Times New Roman";
width:62em;
font-size:0.75em;
color:grey;
border-top-style:solid;
border-color:grey;
border-width:0.25em;
margin: 0.25em 0em 0em 5em;
}

related http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on — Adriano, Mar 02 '14 at 14:09

SpaceBeers · Accepted Answer · 2012-07-12T09:54:03.007

8

There's a couple of ways of doing this. You can use:

opacity:

style {
    opacity: 0.5;
    filter: alpha(opacity=50); // For IE
    -moz-opacity:0.5; // For Firefox < 5.0
}

RGBA colours:

style {
    background: rgba(0, 0, 0, 0.5); // The last item is the opacity
}

An image:

style {
    background: url('image/transparent_img.png') repeat top left;
}

RGBA is the nicest method but unsupported in older IE versions.Opacity isn't that well supported (IE again either). You can use an rga() as fallback but personally for now I think a transparent image is your best x-browser bet.

EDIT: Seeing as I misunderstood the question, you want to just add padding to the #container.

edited Jul 12 '12 at 09:54

answered Jul 12 '12 at 09:19

SpaceBeers

13,617
6
47
61

I understand all this ways can achieve to make an transparent box, actually, I can make the box, but my problem is instead the location problem, currently, my transparent box will keep in touch with the background image of container, which is not quite good looking, I have tried to add a dummy division in before the function div and set the buttom margin to some value, but still does not work, so I would like to ask what is the reason I cannot make it like the example in W3C one, which the transparent box is locating at the centre. – Conrad Jul 12 '12 at 09:34
Ok so you want the #function div to not be touching the top of the #container? Is that right? http://jsfiddle.net/spacebeers/jNATf/ – SpaceBeers Jul 12 '12 at 09:38
ya, this is exactly what I want to do, this web site seems quite convenient, so even I cannot upload the screen capture, by just posting the code, I can let others understand the problem – Conrad Jul 12 '12 at 09:52
Ok I've edited the answer. You just want to add padding to the top of #container – SpaceBeers Jul 12 '12 at 09:54
oh, great, it finally works, may I ask why it does not work if using margin but works when using padding since I want to clear my concept so that I won't make the same mistake again. – Conrad Jul 12 '12 at 10:08
Cool. Have a read up on the box model. That should clear things up - http://www.w3.org/TR/CSS2/box.html – SpaceBeers Jul 12 '12 at 10:10

score 3 · Answer 2 · answered Jul 12 '12 at 09:17

3

It work correctly but your positioning is wrong.

div with background: black not contain your div with transparent background. You should change it in your html. Also you can watch it work when you add background: black; to your body in css.

answered Jul 12 '12 at 09:17

Mateusz Rogulski

7,357
7
44
62

Are you talking about the header div? Actually, in my design I would like to have my page divided into three part: header, container and the footer, each are spearated by a 5px margin. And in the container div, I would like it to have a transparent box at the middle to show the content, such as some tables, a paragraph. But the problem I meet is when I try to locate it at the middle by setting the margin value of function div, it push the background down also, but if I dont add the margin of the top and buttom, it will touch the top of background image, which is not quite good in looking. – Conrad Jul 12 '12 at 09:29
When you add `margin` to element it not display background on it. If you use padding there it does. So if you have problem with normal positioning you can also try absolute positioning. But I not recommend it. For normal positioning you can use `margin: 5px auto` in your css to have 5px space from top and bottom and in center of right and left. – Mateusz Rogulski Jul 12 '12 at 09:39

Making a transparent box with CSS

2 Answers2