使图像的一部分变灰

Question

如何使图像的一部分变灰？像这样

我正在考虑在绿色图像之上应用带有灰色图像的 svg。有一种在 svg 中绘制图像的方法，以及一种绘制分段路径的方法，但是如何将图像包含在路径中？路径 {background: url()} 不起作用

到目前为止，我得到了这个：

<span class="hp"></span>

<svg width="300" height="300">       
    <path d="M25,25 L25,0A25,25 0 0,1 43.224215685535285,42.11367764821722 z"/>
</svg>

<style>
.hp {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-image: url(http://i.stack.imgur.com/suYdT.png)
}
svg {
    position: absolute;
    top: 0;
    left: 0;
}
path {
   background: url (http://i.stack.imgur.com/CWzfS.png)
}
</style>

fiddle

Answer 1

将剪裁后的灰色图像叠加在原始图像之上。

<svg width="0" height="0">
    <clipPath id="clipPolygon">
        <polygon points="0 55,25 25,25 0,0 0"></polygon>
    </clipPath>
</svg>

<div class="image-container">
    <img class="image-grey clip" src="http://i.stack.imgur.com/suYdT.png" />
    <img class="image-coloured" src="http://i.stack.imgur.com/suYdT.png" />
</div>

.image-coloured {
    z-index: 0;
    position: absolute;
}
.image-grey {
    z-index: 1;
    position: absolute;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: gray; /* For IE 6 - 9 */
  -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.clip {
    /*Chrome,Safari*/
    -webkit-clip-path: polygon(0px 55px, 25px 25px, 25px 0px, 0px 0px);
    /*Firefox*/
    clip-path: url("#clipPolygon");
    /* iOS support inline encoded svg file*/
    -webkit-mask: url(data:image/svg+xml;
    charset=utf-8;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTAsNTUgTDI1LDI1IDI1LDAgMCwwIHoiLz4KICA8L2NsaXBQYXRoPgogIDxwYXRoIGlkPSJzdmdNYXNrIiBkPSJNMCw1NSBMMjUsMjUgMjUsMCAwLDAgeiIgIC8+Cjwvc3ZnPg==) no-repeat;
}

从here获取了将图像部分变灰的代码

从here生成多边形路径

从here获得跨浏览器灰度滤镜

fiddle