title: How to remove transparent color ( opacity )
body: <p>I have the following Codes: </p>
  
  <p>html...</p>
  
  <pre><code>&lt;div id="solidcolor"&gt;
      &lt;div class="transcolor"&gt;transcolor
          &lt;div class="notranscolor"&gt;some text&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css..</p>
  
  <pre><code>#solidcolor{
      background: url("http://i45.tinypic.com/o5aycp.gif") repeat; 
      width: 200px; 
      height: 200px;
  }
  .transcolor{
      background: blue; 
      opacity: 0.4; 
      height: 100px;
  }
  .notranscolor{
      background: red; /* I want this color to solid color not transparent color*/
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/m2Eas/2/" rel="nofollow">DEMO</a></strong></p>
  
  <p><strong>Edit note</strong> I couldn't use rgba() method to set it background-color because I have to set linear gradient color.</p>
  
  <p><strong>Edit1</strong> </p>
  
  <p>I couldn't get proper solution to this even after applying absolute positioning too. But next idea I would like to do this with calc() method but it doesn't exits. Any idea?</p>
  
  <p><strong>Edit2</strong></p>
  
  <p>As @rokburgar has stated an answer, I couldn't able to solve my problem even after applying absolute position. But I wanted to set opacity equal to 1.25 I know this should be 0 to 1 but he has stated 0.4 * 1.0 = 0.4 like this 0.8 * 1.25 = 1 then why does it not work?</p>