title: CSS: Clear background
body: <p>I wanted to ask if it is possible to &quot;clear&quot; the background of an element using CSS</p>
  <p>Here is an example (somewhat what I mean):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.background {
    width: 150px; 
    height: 150px; 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png');
    display: fixed;
    padding: '16px';
    overflow: auto;
  }
  
  .container {
    display: fixed;
    width: 100%;
    height: 100%;
  }
  
  .item {
    height: 35px;
    background-color: rgba(255,255,255,0.5);
    margin: 12px;
  }
  
  .item-gradient {
    height: 35px;
    margin: 12px;
    background-image: linear-gradient(rgba(255,255,255,0.5), transparent);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="background"&gt;
    &lt;div class="container"&gt;
      &lt;div class="item"&gt;
        item #1
      &lt;/div&gt;
      &lt;div class="item"&gt;
        item #2
      &lt;/div&gt;
      &lt;div class="item-gradient"&gt;
        item #3
      &lt;/div&gt;
      &lt;div class="item"&gt;
        item #4
      &lt;/div&gt;
      &lt;div class="item"&gt;
        item #5
      &lt;/div&gt;
      &lt;div class="item"&gt;
        item #6
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In the snippet I have directly applied a gradient to the last item, however, I want the gradient to remain there as I scroll through the items. Is this possible using CSS?</p>
  <p>EDIT: an image for reference:</p>
  <p><img src="https://i.stack.imgur.com/sdsix.gif" alt="enter image description here" /></p>
  <p>E.g I want the bottom of the container to have a gradient from the background</p>