Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Milan is almost correct. You'll want to make the background of the transparent div transarent via RGB. For black that would be (0,0,0). To add transparency, you'd simply add a decimal (similar to 'opacity:.55' for CSS; so to get a 55% opaque black background, you'd use </p> <pre><code>background: rgba(0,0,0,0.55); </code></pre> <p>So, to make an example div with a 55% opacity background w/ white text, use:</p> <pre><code>.blackopaque { background:rbga(0,0,0,0.55); color:#ffffff; } </code></pre> <p>The 'background' changes the background, and the color changes the color of the text (white, in this case). Hope this helps! Matt</p> <p><strong>EDIT: IE Support</strong> Adding support to IE is easy, all you have to do is specifically target IE users with their own stylesheet for that element. Open up your theme's header file, let's say you have a stylesheet designed specifically for IE w/ a transparent PNG to get the transparent black effect, named IE.css. You'd want to insert this code <em>below</em> your existing CSS inclusion:</p> <pre><code>&lt;!--[if IE]&gt; &lt;link rel="stylesheet" type="text/css" media="all" href="&lt;?php bloginfo( 'template_url' ); ?&gt;/IE.css" /&gt; &lt;![endif]--&gt; </code></pre> <p>This conditional stylesheet makes itself available only to IE users, so the rest of the <em>ahem</em>, more advanced browsers can enjoy RGBa.</p> <p>For the IE stylesheet, you'd want something like this:</p> <pre><code>.blackopaque { background:url('*link to your 55% opaque png file*') color:#ffffff; } </code></pre> <p><strong>NOTE</strong> You'd only have to include that one rule in the IE stylesheet, just so that it overrides the default rule for that background.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload