Не получается сделать эффект размытия фона

@[FENIX] · Регистрация: 09.10.2009

Студворк — интернет-сервис помощи студентам

Всем привет. Народ, у кого-нибудь получалось применять размытие Гаусса только к фону определённого блока на странице? Сейчас поясню:

Есть страница, у неё фоновое изображение на всю ширину и на всю высоту. Есть на странице форма. Я хочу сделать так, чтобы у формы фон был прозрачный, но также чтобы только к фону применялось размытие Гаусса, а к элементам формы - нет.

Подскажите, как это можно реализовать? Пока нашёл только css-свойство filter: blur();

Но может можно как то по-другому сделать?

Вот код: https://jsfiddle.net/fenix_63/b6znvjx2/13/

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="background">
  <form action="">
    <div class="text">
        Текст
    </div>
    <div class="blur">
        
    </div>
</form>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.background{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://i.***********/sgXTCgKD/purple-sunset-wallpa.png');
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.7);
    background-attachment: fixed;
    background-position: center center;
}
 
.background form{
    width: 626px;
    height: 434px;
    top: 50%;
    color: #fff;
    overflow: hidden;
    border: 2px solid #000;
    margin: auto;
    opacity: 1;
    position: absolute;
    z-index: 2;
    
    filter: blur(1px);
}

Вот как хотелось бы видеть (на скрине):

Подскажите, куда копать? А то уже прям и не знаю. backdrop-filter применять пробовал - пока не получилось, да и вроде бы это свойство только в Safari поддерживается.

Буду рад за любую помощь, спасибо.

@AlexZaw · 13.06.2019, 10:34

[FENIX], Вариант не мой, да и проблема там была в другом, но, с небольшими изменениями, как пример подойдет:
живой пример

HTML5
1
<div class="page_block"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
  background: #fff url(https://sun6-6.userapi.com/c824603/v824603959/16dc1d/MQyTjq741SI.jpg) 0 0 / 100vw auto  fixed !important;
  color: #fff;
}
 
.page_block {
  width: 500px;
  height: 200px;
  margin: 20px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.1);
}
 
.page_block:before {
  content: '';
  filter: blur(2px);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #fff url(https://sun6-6.userapi.com/c824603/v824603959/16dc1d/MQyTjq741SI.jpg) 0 0 / 100vw auto no-repeat fixed;
}

@[FENIX] · 13.06.2019, 13:49 **[ТС]**

AlexZaw посмотрел пример. Так а где тут размытие по-Гауссу то? Я вижу что тут только background-color: rgba(255, 255, 255, 0.1); работает.

А вот filter: blur(2px); что этот стиль есть, что его нету - размытия нет никакого.

@novichek_1905 · 13.06.2019, 13:53

[FENIX],

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    @charset "UTF-8";
    body {
      font-family: "メイリオ", meiryo;
    }
 
    section {
      width: 600px;
      margin: 30px auto;
      position: relative;
      border: solid 1px rgba(255, 255, 255, 0.1);
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }
 
    section>div {
      padding: 30px;
      color: #fff;
      text-shadow: 0 1px 5px #000;
    }
 
    section h1:first-child,
    section h2:first-child {
      margin-top: 0;
    }
 
    body,
    section:before {
      background: url("https://farm6.staticflickr.com/5297/5426896407_eac4e086f0_o.jpg");
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
    }
 
    section:before {
      content: "";
      z-index: -1;
      -webkit-filter: blur(4px);
      -ms-filter: blur(4px);
      filter: blur(4px);
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
 
<body>
  <section>
    <div>
      <h1>背景をぼかすボックス</h1>
      <p>CSS Filter の効果で背景をぼかしています。</p>
    </div>
  </section>
 
  <section>
    <div>
      <p>bodyとsection:beforeに同一の背景画像および背景設定をし、section:before の方だけに CSS Filter の blur を設定しぼかしています。</p>
      <p>sectionそのものにCSS Filterを設定すると、section内の文字までぼかしてしまうため、section:beforeに背景を設定し、それだけぼかしています。</p>
    </div>
  </section>
 
  <section>
    <div>
      <p>※IEでの表示はお察し<br>面倒なIE専用の手法を取れば同じような表示は可能。</p>
    </div>
  </section>
 
  <section>
    <div>
      <h2>ダミーテキスト</h2>
      <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
      <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
    </div>
  </section>
 
  <section>
    <div>
      <h2>ダミーテキスト</h2>
      <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
      <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
    </div>
  </section>
 
</body>
 
</html>

@AlexZaw · 13.06.2019, 17:41

Сообщение от [FENIX]

А вот filter: blur(2px); что этот стиль есть, что его нету - размытия нет никакого.

Сделайте blur вместо 2px, например, 10 и сразу поймете что размытие есть

Ну или уберите полупрозрачный фон.

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@[FENIX] 4 / 4 / 2 Регистрация: 09.10.2009 Сообщений: 528
	13.06.2019, 13:49 [ТС]
	AlexZaw посмотрел пример. Так а где тут размытие по-Гауссу то? Я вижу что тут только background-color: rgba(255, 255, 255, 0.1); работает. А вот filter: blur(2px); что этот стиль есть, что его нету - размытия нет никакого. 0