title: Fade the bottom of a div over a semi-transparent background
body: <p>I have a div containing text placed over a semi-transparent background.
  I would like the bottom of this div to gradually disappear.</p>
  
  <p>I used a gradient to achieve this.  Over a non-semi-transparent background it works without any problem.</p>
  
  <pre><code>#fadeout {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 50%;
      background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
      background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
      background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
      background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
      background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
      pointer-events: none;
  }
  </code></pre>
  
  <p>I made this fiddler showing what I want to do: <a href="https://jsfiddle.net/ytuxn9Lu/6/" rel="nofollow noreferrer">https://jsfiddle.net/ytuxn9Lu/6/</a> (link edited to add random background image, see edit)</p>
  
  <p>The problem is that the gradiant overlay adds with the background and so the result is not what I want.</p>
  
  <p>What can I do to achieve this ?</p>
  
  <p>Thanks !</p>
  
  <p>EDIT:  To add more information, in the real application, the <code>body</code> has an image background.  The <code>#parent</code> div has a semi-transparent background and the <code>#fadeout-parent</code> div contains the text and the <code>fadeout</code> div.
  The solution sould then work no matter the background color/image (if possible).</p>