Фоновый фильтр без изменения дочерних divs

Question

Я хочу использовать фильтр для своего фона, но этот контент не должен влиять на содержимое этого раздела.

jsfiddle

Код:

#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

Точно так же как wth непрозрачность, вы не можете остановить наследование фильтра от родителя до chil д. Единственное, что вы можете сделать, это установить фон на дочерний элемент, а не родительский. Например, вы можете использовать: перед псевдоэлементом на #start

 

    #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; 
    } 

Answer 2

Не уверен, насколько гибким вы с добавлением элементов, но только быстро что-то:

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