0

Здравствуйте, у меня есть Фон с div'ом, к которому применил фильтр blur. Вопрос заключается в том, чтобы размытость соответствовала координатам где размещен div, и при изменении размера, размытость покрывала ту область, на которой она сейчас.

*{
  margin:0;
  padding: 0;
}


body,html {
  height: 100%;
}
html {
   background: url(http://www.fourred.com/images/backgrounds/bg-img-1.jpg) round no-repeat;
}

.wrap {
  position: relative;
  width: 500px;
  margin: 0 auto;
  top: 200px;
}

.blur,
 .container {
  position: absolute;
  width: 500px;
  height: 300px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

form#inputs {
  float: left;
  padding:50px 20px  ;
}
.blur {
  z-index: 99;
  background: url(http://www.fourred.com/images/backgrounds/bg-img-1.jpg) ;
  filter: blur(5px);

}
.container {
  z-index: 100;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,.5);
}
<div className='wrap'>
          <div className="blur"></div>
          <div className="container">
          <form id="inputs">
            <input id="name" type="name"/><br/><br/>
            <input type="password"/><br/><br/>
            <button type='Submit'>Submit</button>
          </form>
          <p className="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolor ea et, perspiciatis voluptatum accusantium delectus nisi reprehenderit eveniet fuga, modi pariatur eius vero debitis iste alias quam. Minima, qui? </p>
        </div>
      </div>

2

1 ответ 1

2

Фон с фильтром blur в определенной части изображения.

В общем случае нельзя размыть "фон под элементом" или "часть элемента", но есть возможность сделать такой wolkaround.

Нужно сделать копию фона в нужном месте, размыть его, обрезать с помощью overflow:hidden а затем спозиционировать ее под элементом (где должен быть размытый фон) с помощью JS

$(function() {
  function render() {
    //размещаем блок с размытым фоном точно под видимый блок, 
    //и обновляем блок каждый раз при ресайзе
    $('.bg').removeAttr('style').css({
      width: $('body').width(),
      height: $('body').height(),
      marginLeft: -$('.box').offset().left - 11,
      marginTop: -$('.box').offset().top - 11,
      marginBottom: -$('body').height() + $('.box').offset().top + 11,
    });
  }
  render();
  $(window).resize(render);
});
body {
  background-image: url(https://placeimg.com/1200/1200/any);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.contain {
  padding: 10px;
}
.box {
  border: 1px solid #fff;
  border-radius: 10px;
  margin: 10px auto;
  padding: 10px;
  width: 70%;
  overflow: hidden;
}
.bg {
  position: relative;
  background: url(https://placeimg.com/1200/1200/any);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain" align="center">
  <div class="box">
    <div class="bg"></div>
    <h1>Lorem ipsum </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolor ea et, perspiciatis voluptatum accusantium delectus nisi reprehenderit eveniet fuga, modi pariatur eius vero debitis iste alias quam. Minima, qui?</p>
  </div>
</div>

Идея ответа https://stackoverflow.com/questions/33820493/css-how-to-blur-background-image-within-the-div

Так-же обратите внимание на ваши ошибки:

classname вместо class в теге.

1
  • это просто под реакт написано, а class зарезервированое слово! Спасибо, сейчас попробую 20 мар 2017 в 16:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.