3

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>

Improve this question
3
  • Have you tried giving the text an opacity of 1? Commented Mar 14, 2013 at 15:21
  • 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? Commented Mar 14, 2013 at 15:25
  • stackoverflow.com/questions/637921/… Commented Mar 14, 2013 at 15:41

3 Answers 3

Reset to default
6

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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 */
Improve this answer

1 Comment

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
1

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.

Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.