Question

我想为我的背景使用过滤器，但此div中的内容不应受此过滤器的影响。

代码：

#start{
    background: url('http://placekitten.com/700/1000') no-repeat;
    background-size: 100%;
    height:1000px;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

#startbox{
    background: rgba(0, 0, 13, 0.4);
    margin-right: 250px;
    margin-left: 250px;
    height: 350px;
    border-radius: 10px;
    padding: 30px;
    -webkit-filter:none;
    filter: none;

    }

DUMMY HTML：

<div id="start">
    <div id="startbox">Lorem ipsum lorem ipsum</div>
</div>

我该怎么做？

Answer 1

不确定添加元素的灵活性，但只是一些简单的事情：

HTML：

<div id='container'>
    <div id="start"></div>
    <div id="startbox">Lorem ipsum lorem ipsum</div>
</div>

CSS：

#container {
    position: relative;
}

#start{
    background: url('http://placekitten.com/700/1000') no-repeat;
    background-size: 100%;
    height:1000px;

}

#start {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

#startbox{
    position: absolute;
    top: 20%;
    left: 20%;
    background: rgba(0, 0, 13, 0.4);
    margin-right: 250px;
    margin-left: 250px;
    height: 350px;
    border-radius: 10px;
    padding: 30px;
    width: 100px;
    }

js fiddle

Answer 2

与不透明度相同，您无法停止从父级到子级的过滤器继承。你唯一能做的就是把背景放在子元素上，而不是父元素。例如，您可以在#start

上使用：before伪元素


    #start {position:relative}
    #start:before {
       background:url(.....) no-repeat 0 0; 
       content:''; 
       width:100%; 
       height:100%; 
       filter:blur;
       position:absolute;
       left:0;
       top:0;
       z-index:-1
    }
    #startbox {
        background: rgba(0, 0, 13, 0.4);
        margin-right: 250px;
        margin-left: 250px;
        height: 350px;
        border-radius: 10px;
        padding: 30px;
    }

背景过滤器无需更改子div

2 个答案: