Databases
StackOverflow2013
Postsdbo
POHow to work around opacity issues?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to work around opacity issues?
    primarykey
    data
    text
    <p>It is my understanding that when opacity is applied to a div, computer renders that div on the on top (or surface level) of all other divs (or layers).</p> <p>With that being said, I am trying to place 4 different divs over each other. Each of the divs have different z-indexes, so that they will be layered one on top of the other. If my statement concerning opacity is true, then any layer containing an opacity will always be forced to sit on top - making the entire picture have an opaque quality.</p> <p>MY question is: IS there a way to trick the computer into rendering the opacity, without the opaque quality?</p> <p>Here is my HTML: </p> <pre><code>&lt;div id="wrapper"&gt; &lt;div id="subWrapper1"&gt; &lt;div id="cyan"&gt; &lt;img src="images/cyanObama.png" alt="Cyan Version" /&gt; &lt;/div&gt; &lt;div id="magenta"&gt; &lt;img src="images/magentaObama.png" alt="magenta version" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="subWrapper2"&gt; &lt;div id="yellow"&gt; &lt;img src="images/yellowObama.png" alt="yellow version" /&gt; &lt;/div&gt; &lt;div id="black"&gt; &lt;img src="images/blackObama.png" alt="black version" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is the CSS: </p> <pre class="lang-css prettyprint-override"><code>#subWrapper1{position: relative; display: block;} #subWrapper2{margin-top: 262px; position: relative; display: block;} #cyan{width: 555px; height: 555px; margin: 0; position: relative; display: inline-block; z-index: 10;} #magenta{width: 555px; height: 555px; position: relative; display: inline-block; opacity: .7;} #yellow{width: 555px; height: 555px; position: relative; display: inline-block; z-index: 20; opacity: .5;} #black{ width: 555px; height: 555px; position: relative; display: inline-block; z-index: 30;} </code></pre> <p>Here is a JSFiddle: <a href="http://jsfiddle.net/hz2xy/1/" rel="nofollow">http://jsfiddle.net/hz2xy/1/</a></p> <p>Thanks for the help.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjustLearning
    1. USjustLearning
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to work around opacity issues?
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POHow to work around opacity issues?
      1. This table or related slice is empty.
      1. VTDownMod
    1. COhttp://jsfiddle.net/wbDS9/2/, testing this in chrome the div with opacity is still rendered below the one without opacity.
      singulars
      1. POHow to work around opacity issues?
      1. USPatrick Evans
    2. COHere is what I am trying to do. I am taking the CYMK model and animating the four channels to come together in one spot. It works; however, I need to adjust each color channel with opacity and when I do that - the colors become washed out.
      singulars
      1. POHow to work around opacity issues?
      1. USjustLearning
    3. COI have added a JSFiddle to show you.
      singulars
      1. POHow to work around opacity issues?
      1. USjustLearning
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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