Question

我将图片划分为很多<divs>，在主要的css类#background-container我使用了-webkit-filter: grayscale(100%);过滤器，现在我只是不明白如何更改一个特定的{ {1}}他的原始颜色（去除了闪光效果），我尝试了很多，我没有要求你做我的工作......我需要指导：\

演示：http://jsfiddle.net/bzCNb/131/

HTML

<div>

CSS

<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>

谢谢你们！

Answer 1

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

您需要做的是将背景应用于每个块，然后动态定位它以排列，为每个块应用和切换过滤器（或者交换该块的背景以获得预灰度级版本）。如果你的容器是一个固定的大小但是很多JavaScript工作，如果它像你的例子一样流畅，那就不那么难了。

将图像分割为div..cant更改特定div（图像的一部分）颜色

1 个答案: