filling a div with another div

Question

I am making a website, which is made up of a bunch of panels. These panels all have a repeating texture, but to make the site look better, I decided to tint the images using colored divs and opacity. I'd rather not use more pictures, so please do not suggest I just recolor the image.

My problem is, that when I put the text into the tint div, the font inherits the opacity, and ends up grey instead of white, but when I put it outside the tint div, I loose the tint.

.tint {
  display: block;
  position: static;
  height: 100%;
  width: 100%;
  line-height: 100%;
  opacity: 0.4;
  z-index: -1;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
}
.ExpDiv {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;
  -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  border: solid 3px;
  -webkit-transition: all .5s ease-in-out 0.2s;
  -moz-transition: all .5s ease-in-out 0.2s;
  -ms-transition: all .5s ease-in-out 0.2s;
  -o-transition: all .5s ease-in-out 0.2s;
  transition: all .5s ease-in-out 0.2s;
  background-color: #99ccff;
  min-width: 7px;
  min-height: 9px;
  max-width: 150px;
  max-height: 200px;
  overflow: hidden;
  background-image: url(striped_linenen.png);
  background-repeat: repeat;
  float: left;
}

<div class="ExpDiv" style="float:left;">
  <div class="tint" style="background: #99CCFF; ">
    Content For these Divs will be inserted by the Owner...
  </div>
</div>
<div class="divider">
  <br />
</div>
<div class="ExpDiv" style="float:left;">
  <div class="tint" style="background: #996699; "></div>
  Content For these Divs will be inserted by the Owner...
</div>

yeah, I made a new div within that div that had an opacity of one, but it didn't change anything, do you have another suggestion on how I would do this? — zachal, Mar 14 '13 at 15:25
http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text — isherwood, Mar 14 '13 at 15:41

score 6 · Accepted Answer · answered Mar 14 '13 at 15:34

As opacity affect the whole block, you can use two differents div. One for the tint, another one for the content. Put both of them in absolute position :

HTML

<div class="ExpDiv" style="float:left;">
    <div class="tint" style="background: #ff0000; "></div>
    <div class="content">Content For these Divs will be inserted by the Owner...</div>
</div>

CSS

.tint {
    position:absolute;
    height:100%;
    width:100%;
    opacity:0.4;
    z-index:1;
    filter:alpha(opacity=40);
}
.content {
    position:absolute;
    height:100%;
    width:100%;
    z-index: 99;
}
.ExpDiv {    
    position: relative;
    width: 150px;
    height: 200px;
}

=> Simplified and updated jsFiddle

score 5 · Answer 2 · answered Mar 14 '13 at 15:26

5

Opacity affects the whole element. You can use rgba for your backgrounds:

background: rgba(153, 204, 255, 0.4); /* #99CCFF */
background: rgba(153, 103, 153, 0.4); /* #996699 */

answered Mar 14 '13 at 15:26

isotrope

1,847
12
10

I know that opacity affects that whole element, thats why I wanted to make the translucent div fill the other div, and have a while staying behind another div with the text – zachal Mar 14 '13 at 15:28

score 1 · Answer 3 · answered Mar 14 '13 at 15:38

I've been dealing with this kind of issues long enough, mostly because sometimes I liked to use semi opaque div backgrounds, but didnt want the text to be partly transparent, I think the issues we had are similar.

By experience, I will tell you just to generate some 10x10 pixel png's with the transparency you want and use them as those div's backgrounds. Will solve you a lot of headaches. The only issue you could have with this is that IE6 and below don't support png's I think, but there was a js library to solve this.

Most aproaches hacking the positions and stuff might end up not working cross-browser and making the modification of your code pretty nasty.

Thanks, but I think I got it to work using my method... I also prefer to use less images, because then there is one less thing the browser needs to download! Thanks — zachal, Mar 14 '13 at 15:41

filling a div with another div

3 Answers3