0

Как сделать так, чтобы filter: blur(5px) размывал только фон только того блока, который мне нужен?

Я искал в ответах и нашел пример: http://jsfiddle.net/juanojeda/T5j6H/1/

<p>Something to test that the content is in front of the background.</p>

    body {
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        height: 100%;
    }
    body:before {
        content: "";
        position: absolute;
        height: 20%; width: 20%;
        background: url(http://lorempixel.com/420/255);
        background-size: cover;
        z-index: -1; /* Keep the background behind the content */

        /* don't forget to use the prefixes you need */
        -webkit-transform: scale(5);
        -webkit-transform-origin: top left;
        -webkit-filter: blur(2px);
    }

Он работает, все супер, но мне нужно чтобы код работал не для body а для любого блока и чтобы не было отступов внутри блока, который будет размываться.

3
  • с чем трудности ? codepen.io/Geyan/pen/XNmbZd?editors=110
    – user33274
    9 ноя 2016 в 0:57
  • Супер. Спасибо. Но нужно чтобы еще текст был поверх blur текст, который не будет размыт.
    – gmastrbit
    9 ноя 2016 в 8:17
  • ссылку проверьте ещё раз и мой ответ дан в низу
    – user33274
    9 ноя 2016 в 23:58

3 ответа 3

1

Вот решение вашего вопроса ! Если blur размывает текст то создаём два блока и блок с текстом позиционируем абсолютно !

* {
  margin: 0;
  padding: 0;
}
.a-wrapper,
.c-wrapper {
  display: inline-block;
  position: relative;
}
.a-wrapper .a,
.c-wrapper .c {
  width: 200px;
  height: 200px;
  background: url(https://i.stack.imgur.com/69R3w.jpg);
  background-size: cover;
  filter: blur(5px);
  -webkit-filter: blur(2px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: relative;
}
.b,
.d {
  display: inline-block;
  width: 20%;
  height: 200px;
  background: url(https://i.stack.imgur.com/69R3w.jpg);
  background-size: cover;
}
.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  color: #fefefe;
  line-height: 200px;
  text-align: center;
}
<div class="a-wrapper">
  <div class="a"></div>
  <div class="text">некоторый текст</div>
</div>
<div class="b"></div>
<div class="c-wrapper">
  <div class="c"></div>
  <div class="text">некоторый текст</div>
</div>
<div class="d"></div>

1
  • То, что нужно. Супер. Спасибо!
    – gmastrbit
    10 ноя 2016 в 15:03
1
backdrop-filter: blur(5px);

Применяй к любому элементу. без страха что будет размыто содержимое.


Работает это корректнее всего на macOS, юзеры винды к сожалению видят дефолт блюр, если позиция не absolute

0

У меня Мак и ни один из вариантов мне не помог. У меня сработало такой вариант. Фон заблюрен и контент не пострадал

.info_block {
  position: relative;
  height: fit-content;
  max-width: 645px;
  width:100%;
  border-radius: 16px;
  z-index: 2;
  overflow-y: hidden;
}
  
.info_block::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(248, 248, 248, 0.7);
  backdrop-filter: blur(4.5px);
}

.info_block__body {
  position: relative;
  padding: 32px 48px;
}
 <div class="info_block">
  <div class="info_block__body">
      <h1 class="title">Help you to Make modern Funiture</h1>
      <div class="text">
          <p>We help you to create organize your room to be more cozy, design by professional interior
              designer</p>
      </div>

      <a class="button" href="#">See Our Product</a>
  </div>
</div>

Ваш ответ

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

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