title: Can I set text background to be blurry over an image?
body: <p>Is there a way to set the background of text blurry over an image? Like</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>h1 { 
      text-align: center; 
      background-color: &lt;blurry&gt;; 
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt; 
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;/head&gt; 
    &lt;body&gt; 
      &lt;h1&gt;The Last Will and Testament of Eric Jones&lt;/h1&gt; 
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>EDIT</strong> most of the solution online show how to <em>blur</em> the image. What I am seeking for is something to apply a blur filter <em>just to the background of the text</em> element. I don't know if you can set this inside <code>h1</code> element or not. </p>