Размытие Blur на фон блока

#html #css

Есть секция, которая содержит вложенные блоки, картинки и тд. На этой секции фоном
задана картинка, но мне её нужно размыть так, чтобы другие элементы оставались не тронутыми.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Eius et ea nemo deleniti natus aliquid
 


Скажите пожалуйста, как это сделать? Нужно чтобы был размыт только фон.
    

Ответы

Ответ 1

Вариант 1



.test{
  position: relative;
  min-height: 400px;
}
.test:before{
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url('http://www.ufunk.net/wp-content/uploads/2016/01/ValentinValkov-2.jpg')
no-repeat center top;  
  background-size: cover;
  -webkit-filter: blur(5px);   
  filter: blur(5px);  
}
.test p{
  position: relative;
  z-index: 1;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius et ea nemo deleniti
natus aliquid
 





Вариант 2



.test{
  position: relative;
  min-height: 400px;
}
.img-bg-test{
  position: absolute; top: 0; left: 0;
  width: 100%;
  max-height: 100%;
  -webkit-filter: blur(5px);   
  filter: blur(5px);
}
.test p{
  position: relative;
  z-index: 1;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius et ea nemo deleniti
natus aliquid