分割图像后，不能改变特定的div(img的一部分)颜色

Question

我将图像划分为许多<divs>，在主css类#background-container中，我使用-webkit-filter: grayscale(100%);过滤器，现在我只是不明白如何将一个特定的<div>更改为他的原始颜色(删除过滤效果)，我尝试了很多，我不是要求你做我的工作…我需要方向:

Demo: http://jsfiddle.net/bzCNb/131/

HTML

<div id="background-container">
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

CSS

.blocks {
    display:table-row;
}
.block {
    display:table-cell;
    height:100px;
    border:15px solid #FFF;
}
#background-container { 
    display:table;
    width:100%;
    border-collapse:collapse;
    box-sizing:border-box;
    background: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-filter: grayscale(100%);
}

Answer 1

这是不可能的，因为过滤器效果是应用于父容器而不是每个子块。与现实生活中的过滤器不同，你不能把CSS过滤器应用到一个元素上，并让它影响它下面可见的内容。

你要做的是将背景应用到每个块，然后动态定位它对齐，为每个块应用和切换过滤器(或将该块的背景交换为预灰度版本)。如果你的容器是一个固定的大小，这并不难，但如果它是像你的例子一样是流动的，那么很多JavaScript工作。