How to add opacity only to certain divs

Question

I want to add separate opacity to my header and my div and my form button. I want the div opacity to be 0.5; which is no problem but I don't want my form button to have a opacity. When ever I try to change levels of opacity my header and the form button opacity becomes the same. For example: I want the header opacity to be 0.9 and the div opacity to be 0.5 and no opacity on the submit button, here is my HTML code:

<!DOCtype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adeventist Youth's Empowerment</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<p>&nbsp;</p>
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment.  At this       website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!!     -Shadowcoder </cite></h1>
</div>    
<form id="form" method="get" action="Main.html">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>                  
</body>
</html>

My css is this:

body {
background-image:url(Images/background%20image1.jpg);
   background-repeat:no-repeat;
   background-size:100%;
   background-position:center top;  
}

#apDiv1 {
position: fixed;
left: 279px;
top: 100px;
width: 817px;
height: 390px;
}


#apDiv1 .apDiv1 h1 cite {
font-family: Georgia, Times New Roman, Times, serif;

}

#apDiv1 {
background:#FFF;
opacity: 0.5;
border-radius: 20px;
}

#form {
width: 20em; margin: auto;
}

.button {
display: marker;
background-position:center;
width: 9em;
height: 1em;
border:thin;
border-radius: 20px;
padding: 0px;
text-align: center;
font-size: 2em;
line-height: 1em;
color: #FFF;
background-color: #0C0;

}

.button:hover{
color: #000;
background-color: #0C0;

}

header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 1;
}
* {
margin: 0;
padding: 0;
}

when ever i add opacity to the div the form automatically has that opacity and so does the header.

You need to format your code so it is readable (e.g., properly indent) and create a demo page on jsfiddle.net — Joshua Robinson, Nov 04 '13 at 20:28

score 0 · Answer 1 · answered Nov 04 '13 at 20:34

0

from your code, you have missed out the closing tag

To answer your question, you can use something like this to your div

#apDiv1 {
background: rgba(255,255,255,0.5);
border-radius: 20px;
}

where rgb is the color in rgb format, and a is for the alpha

answered Nov 04 '13 at 20:34

thanks for your reply but am not sure what closing tag you are referring to. – john london Nov 04 '13 at 20:36
the closing div of the id="apDiv1" – Nov 04 '13 at 20:42
I understand now, but why use rgba instead of opacity? – john london Nov 04 '13 at 20:50
You use rgba to achieve an opaque background. If you just use opacity, everything inside the div will become opaque. rgba is usually used for an opaque background with text on top of it. The text won't be opaque, but the background would. – ValleyDigital Nov 04 '13 at 21:01
Opacity sets the value for an element and ALL of its children RGBA sets the value for the specific id – Nov 04 '13 at 21:03

score 0 · Accepted Answer · answered Nov 04 '13 at 20:39

First off you shouldnt name your div ids and classes the same. It only leads ot confusion. If you formatted your code correctly. It would be very easy to see that oyu never close you apDiv1. You open another one with the same class name. As I mentioned above this is only going to confuse you. Close your outer div at the appropriate place and then it will get its opacity.

<div id="apDiv1">
    <div align="center" class="apDiv1">            
        <h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment.  At this       website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!!     -Shadowcoder </cite></h1>

    </div>
    <form id="form" method="get" action="Main.html">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>
            <input type="submit" value="Escape The World" class="button">
        </p>
    </form>
CLOSE THE DIV HERE OR EARLIER IF YOU WANT

After you fix all that... Give your outer div an opacity this way...

background: rgba(64, 64, 64, 0.5)

@johnlondon It will set the background color to having an opacity not the entire div itself. Thus all the elements inside the div wont be masked by the opacity and will rest on top of it. If that makes any sense — Kierchon, Nov 04 '13 at 20:54
yes it does and I thank you for that, it solved my problem but i used rgba(255,255,255,0.5) I will accept this answer. — john london, Nov 04 '13 at 20:56

score 0 · Answer 3 · answered Nov 04 '13 at 20:46

Here you go, I have added three opacity in header, form and apDiv1 class. jsfiddle

.apDiv1{
    opacity: 0.2;
}

#form {
width: 20em; margin: auto;
opacity: 0.8;
}

header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 0.7;
}

How to add opacity only to certain divs

3 Answers3