html - 从页面的特定部分删除过滤器

Question

我使用滤镜将我的背景图像设为黑白，并想使用 Bootstrap 在页面的特定部分(见下图)将其删除。如何在 CSS 中做到这一点？

HTML:

    <div class="section bg-cover">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div id="color" class="col-xs-8 col-xs-offset-2 col-md-8 col-md-offset-4 img-rounded">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <!-- text here -->
                </div>
            </div>
        </div>
    </div>

CSS:

    .bg-cover {
        background: url('img/bg1.jpg') no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        -webkit-filter: grayscale(100%); 
        filter: grayscale(100%);
    }

    #color { /* COLOR HERE !! */
        border: 3px solid;
        height:60vh;
    }

结果图片(颜色应在正方形内):https://puu.sh/pl8GC/2f7f15c0a8.jpg

Answer 1

好吧，我找到了一个解决方案，所以我把它贴在这里:我不得不把背景放在一个没有 child 的 div 中，因为 filter 属性传播到它的 div 的所有 child ，然后使用 background-clip 把另一个背景放在正确的位置。