html - 将图像划分为 div..cannot change specific div(part of image) 颜色后

Question

我将图像分成了很多 <divs> , 在主 css 类中 #background-container我用了-webkit-filter: grayscale(100%);过滤器，现在我只是不明白如何更改一个特定的 <div>到他原来的颜色(去除闪烁效果)，我试了很多但我不是要你做我的工作......我需要指导:\

演示: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

这是不可能的，因为过滤效果是应用于父容器而不是每个子 block 。与现实生活中的过滤器不同，您不能将 CSS 过滤器应用于元素并让它影响其下方可见的内容。

您需要做的是将背景应用到每个 block ，然后动态定位它以对齐，为每个 block 应用和切换滤镜(或将 block 的背景换成预灰度版本)。如果您的容器是固定大小的，那么并不难，但如果它像您的示例一样流畅，那么很多 JavaScript 都可以工作。