title: CSS grayscale filter and background-blend-mode at same time?
body: <p>I'm trying to treat an image the same way it is in a photoshop file - desaturating the image to grayscale, and then applying a color overlay with a multiply blend mode. To this end, I am styling a CSS background image with...</p>
  
  <pre><code>.someclass
  {
      /* grayscale */
      -webkit-filter: grayscale(1); 
      filter: gray; 
      filter: grayscale(1);
      filter: url(desaturate.svg#greyscale);
  
      /* multiply */
      background-color: rgba(190, 50, 50, 0.65);
      background-blend-mode: multiply;
  }
  </code></pre>
  
  <p>The problem with this is that the grayscale filter ends up desaturating red color for the blend mode. In other words, the multiply is occurring first and then the grayscale. How do I switch it so that the grayscale is applied first and then the blend mode is applied second?</p>
  
  <p>I have created a fiddle (<a href="http://jsfiddle.net/g54LcoL1/1/" rel="noreferrer">http://jsfiddle.net/g54LcoL1/1/</a>) for the code and a screenshot (made in Photoshop) of what I would expect the the fiddle result to look like. The bottom most image, <code>div.grayscale.multiply</code>, should be colored red.</p>
  
  <p><img src="https://i.stack.imgur.com/efsRX.jpg" alt="enter image description here"></p>