title: Using CSS, can you apply a gradient mask to fade to the background over text?
body: <p>I have a full screen fixed background image. I would like the text in my scrolling div to fade out at the top, presumably by applying a gradient mask to the background at only the top part of the div. I'm interested in having the text look like it fades away as it the user scrolls down, but still having a large area of full opacity for actually reading the text.</p>
  
  <p>I know there are masking options in the webkit, but I can't find a way to fade through to the page's background <strong>over</strong> the contained text only applying the gradient to a small portion of the element.</p>
  
  <p>Here's an image of the desired result:</p>
  
  <p><a href="https://i.stack.imgur.com/l8awL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/l8awL.png" alt=""></a></p>