Color and Background

  • Revision slug: Useful_CSS_tips/Color_and_Background
  • Revision title: Color and Background
  • Revision id: 135316
  • Created:
  • Creator: Lombardp
  • Is current revision? No
  • Comment /* Translucent background */

Revision Content

Translucent background

Even if opacity (translucency) is a style property defined in CSS-3 specification CSS3 Color Module, chapter 3.2, browsers already support it. According to the spec, opacity can be thought of conceptually as a postprocessing operation, so the selected grade of transparency is applied to all its content.

It means that, if you have a DIV with text inside, it is impossible to have opaque text on translucent background, because if you set the opacity property for the container DIV, all its content inherits the transparency and it is impossible to override it... by normal means.

If you try this example code, you will find that opaquetext is not opaque, it inherited the parent opacity attribute and style redefine is discarded, for the reason explained above.

     This is a normal text
on a translucent background
<div id="container">
    <div id="opaquetext">
      This is a normal text
      on a translucent background
    </div>
</div>
#container {
   background-color: #ffffff;
   filter:alpha(opacity=50);   /* Internet Explorer       */
   -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
   opacity: 0.5;               /* newer Mozilla and CSS-3 */
}
#opaquetext {
   filter:alpha(opacity=100);  /* discarded */
   -moz-opacity:1.0;           /* discarded */
   opacity: 1.0;               /* discarded */
}

In fact there are two workarounds to obtain this effect and both are cross-browser (take into account also the exotic Internet Explorer behaviour):

  • Rearranged hierarchy : Since the main problem is that the text to me made opaque is contained into the translucent box, put it out of that box.
  • PNG image with ALPHA channel : Use a translucent background image.
Rearranged hierarchy

(to be written)

PNG image with ALPHA channel

(to be written)

Revision Source

<p>
</p>
<h3 name="Translucent_background"> Translucent background </h3>
<p>Even if <i>opacity</i> (translucency) is a style property defined in CSS-3 specification <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency">CSS3 Color Module, chapter 3.2</a>, browsers already support it. According to the spec, <i> opacity can be thought of conceptually as a postprocessing operation</i>, so the selected grade of transparency is applied to all its content.
</p><p>It means that, if you have a DIV with text inside, it is impossible to have <b>opaque text on translucent background</b>, because if you set the <i>opacity</i> property for the container DIV, all its content inherits the transparency and it is impossible to override it... by normal means.
</p><p>If you try this example code, you will find that <b>opaquetext</b> is not opaque, it inherited the parent opacity attribute and style redefine is discarded, for the reason explained above.
</p>
<div style="float: right; background-color: #fee; opacity: 0.5;">
    <div>
<pre class="eval">     This is a normal text<br>
     on a translucent background
</pre>
    </div>
</div>
<pre>&lt;div id="container"&gt;
    &lt;div id="opaquetext"&gt;
      This is a normal text
      on a translucent background
    &lt;/div&gt;
&lt;/div&gt;
</pre>
<pre>#container {
   background-color: #ffffff;
   filter:alpha(opacity=50);   /* Internet Explorer       */
   -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
   opacity: 0.5;               /* newer Mozilla and CSS-3 */
}
#opaquetext {
   filter:alpha(opacity=100);  /* discarded */
   -moz-opacity:1.0;           /* discarded */
   opacity: 1.0;               /* discarded */
}
</pre>
<p>In fact there are two workarounds to obtain this effect and both are cross-browser (take into account also the <i>exotic</i> Internet Explorer behaviour):
</p>
<ul><li> <b>Rearranged hierarchy</b> : Since the main problem is that the text to me made opaque is contained into the translucent box, put it out of that box.
</li></ul>
<ul><li> <b>PNG image with ALPHA channel</b> : Use a translucent background image.
</li></ul>
<div style="text-decoration: underline;">Rearranged hierarchy</div>
<p>(to be written)
</p>
<div style="text-decoration: underline;">PNG image with ALPHA channel</div>
<p>(to be written)
</p>
Revert to this revision