title: Is there a way to fade just the text of a div when the div has a partially transparent background
body: <p>I am trying to create a "Read More" fade effect on text when it overflows its container. It is easy when the text is on a solid background. You can have an overlay div with a linear gradient transparency in the same color as the background.This makes it look the text is fading into the background</p>
  
  <p>However my text is already on a partially transparent background. The transparency of the overlay stacks on top of the background making the background appear to fade along with the text. Here is a js fiddle of the problem: <a href="https://jsfiddle.net/b0p6Lozv/2/" rel="nofollow">https://jsfiddle.net/b0p6Lozv/2/</a></p>
  
  <p>My desired effect is to have the background color be consistent throughout the div and have the text fade out towards the bottom of the div. Is it possible to create a gradient on just the foreground colors of a div? Thanks for the help!</p>
  
  <p>here is the code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pageBody"&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class='container'&gt;
      &lt;p&gt;line1&lt;/p&gt;
      &lt;p&gt;line2&lt;/p&gt;
      &lt;p&gt;line3 line3 line3 line3&lt;/p&gt;
      &lt;p&gt;line4&lt;/p&gt;
     &lt;/div&gt;
    &lt;div class="overlay"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="pageBody"&gt;
  &lt;div class="wrapper2"&gt;
    &lt;div class='container'&gt;
      &lt;p&gt;line1&lt;/p&gt;
      &lt;p&gt;line2&lt;/p&gt;
      &lt;p&gt;line3 line3 line3 line3&lt;/p&gt;
      &lt;p&gt;line4&lt;/p&gt;
     &lt;/div&gt;
    &lt;div class="overlay2"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pageBody {
    background: black;
  }
  .wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
  }
  .container {
    height: 100px;
    overflow: hidden;
  }
  .overlay {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 40px;
    background: linear-gradient(rgba(255, 255, 255, 0),        rgba(255, 255, 255, 0.6));</code></pre>
  </div>
  </div>
  </p>