CODEWITHSUNDEEP
htmlcss
NRGdallas
NRGdallas

Reputation: 395

CSS transparency making text transparent

bonus props to whoever can figure out why this isn't working. for some reason, my text "ie content, menu, footer" is inheriting the opacity and not sitting at 1 opacity and being fully visable.

I have it set to both be a class and ID as I have tried both ways, and am fairly beginner with CSS actually

<style type="text/css">
div#page {
  border:0px solid purple;
  width:700px;
  margin:0 auto;
  padding:5px;
  text-align:left;
  background-image:url('images/layout.jpg');
}
div {
  text-align:center;
}
div#header {
  border:2px solid red;
  width:695px;
  height:30px;
}
div#mostpop {
  border:2px solid black;
  width:195px;
  float:Right;
  margin:10px 0px 10px 5px;
  height:245px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#recent {
  border:2px solid black;
  width:195px;
  float:Right;
  margin:10px 0px 10px 0px;
  height:245px;
  position: relative;
  left: 204px;
  top: 255px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#content {
  border:2px solid black;
  width:495px;
  margin:10px 0 10px 0px;
  min-height:500px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#footer {
  border:2px solid black;
  width:695px;
  height:30px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
div.recent p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.content p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.mostpop p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.footer p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.header p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
</style>
<div id="page">
 <!--<div id="header">Header</div>-->
 <div class="mostpop" id="mostpop"><p>Menu</p></div>
 <div class="recent" id="recent"><p>Menu</p></div>
 <div class="content" id="content"><p>Content</p></div>

Upvotes: 0

Views: 18850

Answers (2)

Marc B
Marc B

Reputation: 360572

CSS opacity is a bit wonky - once you set a particular opacity on an element, all children of that element are forced to assume at least the same opacity. You can't get around this with child style overrides.

The standard workaround is to create two elements, and position the second absolutely 'over' the first one with a z-index. The lower element gets your partial transparency, the higher one gets your opaque style.

<div style="position: relative">
   <div id="transparency" style="position: absolute; top: 0; left: 0">... transparent stuff here </div>
   <div id="regular_content" style="position: absolute; top:0;left:0;z-index:1">...</div>
</div>

Upvotes: 1

Matthew
Matthew

Reputation: 25743

Opacity should always inherit from its parent. If you have a div with 50% opacity, and then you set some content within the div to 50% as well, then the resulting inner div will be 25% overall, I'm not completely sure, but I don't think it's possible to make the child elements LESS transparent than its parents.

If you just want the div to have a transparent background, then you don't need to use opacity at all, you can use background: rgba(255, 255, 255, 0.5); for half transparent white, while leaving the foreground text colour intact. There are also workarounds for older versions of IE for this as well, but it should work fine for ie9.

Upvotes: 5

Related Questions