StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2><code>opacity</code> on parent element sets it for the whole sub DOM tree</h2> <p>You can't really set opacity for certain element that wouldn't cascade to descendants as well. That's not how CSS <code>opacity</code> works I'm afraid.</p> <p>What you can do is to have two sibling elements in one container and set transparent one's positioning:</p> <pre><code><div id="container"> <div id="transparent"></div> <div id="content"></div> </div> </code></pre> <p>then you have to set transparent <code>position: absolute/relative</code> so its content sibling will be rendered over it.</p> <h2><code>rgba</code> can do background transparency of coloured backgrounds</h2> <p><code>rgba</code> colour setting on element's <code>background-color</code> will of course work, but it will limit you to only use colour as background. No images I'm afraid. You can of course use CSS3 gradients though if you provide gradient stop colours in <code>rgba</code>. That works as well.</p> <p>But be advised that <code>rgba</code> may not be supported by your required browsers.</p> <h2><em>Alert-free</em> modal dialog functionality</h2> <p>But if you're after some kind of masking the whole page, this is usually done by adding a separate <code>div</code> with this set of styles:</p> <pre><code>position: fixed; width: 100%; height: 100%; z-index: 1000; /* some high enough value so it will render on top */ opacity: .5; filter: alpha(opacity=50); </code></pre> <p>Then when you display the content it should have a higher <code>z-index</code>. But these two elements are not related in terms of siblings or anything. They're just displayed as they should be. One over the other.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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