How to make a div thats inside another div opaque if container isn't?

Forum Moderators: not2easy

Message Too Old, No Replies

How to make a div thats inside another div opaque if container isn't?

TheIceman5

12:48 pm on Jan 4, 2014 (gmt 0)

I have a big div that is partially transparent, inside this I have another div that I do not want to be transparent in any way but cant figure it out, anyone let me know what im doing wrong?
[jsfiddle.net...]

birdbrain

2:35 pm on Jan 4, 2014 (gmt 0)

Hi there TheIceman5,

try it like this...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>rgba example</title>

<style>
body {
   background-image:url(http://fastrackdesign.com.au/coolum/images/1-bedroom-gallery/coolum-seaside-coolum-beach-2-bedroom.jpg);
   background-size:100% 100%;
   background-attachment:fixed;
 }
.maincontent {
   margin:300px 0 16px;
   padding-bottom:16px;
   border-top:1px solid #bc3133;
   background-color:rgba(219,235,249,0.6);
 }
.content_box1 {
   width:93%;
   padding:1px 10px 3px;
   margin:10px auto 0;
   border-radius:5px;
   background-color:#05bb74;
   font-size:16px;
   color:#fff;
   text-align:justify;
 }
.content_box2 {
   width:93%;
   padding:1px 8px 3px 10px;
   margin:15px auto;
   border-radius:5px;
   background-color:#92cafc;
   font-size:14px;
   color:#000;
   text-align:justify;
 }
</style>

</head>
<body>

<div class="maincontent">

<div class="content_box1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis.
</p>
</div>

<div class="content_box2">
<p>Lorem ipsum</p>
<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>  
</ul>
</div>

</div>

</body>
</html>

birdbrain

TheIceman5

9:33 pm on Jan 4, 2014 (gmt 0)

that works, what did you do? was it just change the opaque to rgba?

birdbrain

9:39 pm on Jan 4, 2014 (gmt 0)

Hi there TheIceman5,

yes, that and a few minor code adjustments. ;)

birdbrain