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

好吧，我找到了一个解决方案，所以我在这里发布：我必须将背景放在没有子节点的div中，因为filter属性传播给它的div的所有子节点，然后使用background-clip来放置另一个在正确的位置上的背景。

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

1 个答案: