仅为子元素显示彩色的灰度图像

Question

我想将背景图像设置为灰度，但是对于特定的div或部分，它应该是彩色的。

请参阅我的代码

<div class="parent">
  <div class="child"></div>
</div>

这是css

   .parent{
     height: 300px;
     width: 450px;
     background: url("http://lorempixel.com/300/450/") 50% 50% no-repeat;
     background-size: cover;
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
     position:relative;
   }
  .child{
     width: 100px;
     height: 100px;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
     border-radius: 50px;
     border: 2px solid #fff;
     position:absolute;
     top:35%;
     left:35%;
     filter: none;
   }

Here is the fiddle link

我想显示设置为parent的子元素的彩色背景。 请建议我。谢谢。