Эффект размытия фона

@almaz1994 · Регистрация: 07.05.2014

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

Всем привет)
В общем ситуация:

Есть общий большой фон)
На это фоне блок с другим, полупрозрачным фоном.

Как можно сделать, чтобы в области этого блока нижний общий фон был размыт?)

@Fedor92 · 24.09.2014, 22:55

Честно говоря больше похоже, что поверх обычного фона наложили див с прозрачным или сероватым фоном ...

@whiteapps · 25.09.2014, 10:09

almaz1994,

может быть поможет это Эффект размытия по Гауссу на CSS

@Опан · 25.09.2014, 11:25

А всё же, как сделать, чтобы фон был размыт?

@monochromer · 25.09.2014, 12:33

непосредственно размытие можно реализовать через css-фильтры (но они поддерживаются только последними версиями браузеров) или SVG-фильтры.

Кроссбраузерное решение - сделать две картинки. В случае необходимости размытую картинку - позиционировать с помощью JavaScript.

@Goal · 27.09.2014, 00:28

Сообщение от monochromer

Кроссбраузерное решение - сделать две картинки. В случае необходимости размытую картинку - позиционировать с помощью JavaScript.

я бы своим программистам за такое руки отрезал

http://jsfiddle.net/zvspvgjw/2/

@monochromer · 27.09.2014, 13:01

Сообщение от Goal

я бы своим программистам за такое руки отрезал

за кроссбраузерное решение? Лично я других вариантов не знаю.
Приведенный код работает только в webkit-браузерах.

@Goal · 27.09.2014, 14:28

Сообщение от monochromer

за кроссбраузерное решение? Лично я других вариантов не знаю.
Приведенный код работает только в webkit-браузерах.

что за глупости, не поленись и попробуй открыть в разных браузерах приведенный стиль для блока

CSS

    filter: blur(3px); 
    -webkit-filter: blur(3px); 
    -moz-filter: blur(3px);
    -o-filter: blur(3px); 
    -ms-filter: blur(3px);

@monochromer · 27.09.2014, 19:34

Сообщение от Goal

не поленись и попробуй открыть в разных браузерах приведенный стиль для блока

не поленился - и вот скриншоты вышеописанного примера

Chrome 37, IE 11, FF 32, Opera 12.17

@ogsstudio · 16.12.2015, 22:52

Ребята помогите
имеется блок DIV, внутри него еще один DIV, смысл в том что оба они используют один URL с изображением, но тот что родительский имеет большой размер, а второй что внутри него имеет малый размер
ВОПРОС: как сделать чтоб фон родительского размывался, а сам DIV что внутри него не был размыт? а то у меня если размывает (свойством filter: blur(15px) ) то размывает полностью все что внутри этого блока, вместе с малым под чистую, нужно как-то вынуть тот блок что внутри на передний план чтоб он не блурился
Это нужно чтоб работало постоянно (не зависимо от наведения курсора)
Заранее спасибо если кто-то откликнется... уже голову сломал...

@almaz1994 · 16.12.2015, 23:03 **[ТС]**

Сообщение от ogsstudio

имеется блок DIV, внутри него еще один DIV, смысл в том что оба они используют один URL с изображением, но тот что родительский имеет большой размер, а второй что внутри него имеет малый размер

Упакуй их в отдельный блок со стилем position:relative
Затем абсолютно спозиционируй два блока (большой и маленький), задай z-index, и они не будут друг в друге

Самое простое решение, на мой взгляд)

@almaz1994 33 / 33 / 15 Регистрация: 07.05.2014 Сообщений: 313
		1
	Эффект размытия фона 24.09.2014, 21:37. Показов 21214. Ответов 10 Метки нет (Все метки) Всем привет) В общем ситуация: Есть общий большой фон) На это фоне блок с другим, полупрозрачным фоном. Как можно сделать, чтобы в области этого блока нижний общий фон был размыт?) 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	24.09.2014, 22:55	2
	Честно говоря больше похоже, что поверх обычного фона наложили див с прозрачным или сероватым фоном ... 0

@whiteapps 413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	25.09.2014, 10:09	3
	almaz1994, может быть поможет это Эффект размытия по Гауссу на CSS 1

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	25.09.2014, 11:25	4
	А всё же, как сделать, чтобы фон был размыт? 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	25.09.2014, 12:33	5
	непосредственно размытие можно реализовать через css-фильтры (но они поддерживаются только последними версиями браузеров) или SVG-фильтры. Кроссбраузерное решение - сделать две картинки. В случае необходимости размытую картинку - позиционировать с помощью JavaScript. 0

@Goal Футболист 532 / 434 / 142 Регистрация: 31.10.2011 Сообщений: 1,010
	27.09.2014, 00:28	6
	Сообщение от monochromer Кроссбраузерное решение - сделать две картинки. В случае необходимости размытую картинку - позиционировать с помощью JavaScript. я бы своим программистам за такое руки отрезал http://jsfiddle.net/zvspvgjw/2/ 1

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	27.09.2014, 13:01	7
	Сообщение от Goal я бы своим программистам за такое руки отрезал за кроссбраузерное решение? Лично я других вариантов не знаю. Приведенный код работает только в webkit-браузерах. 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	27.09.2014, 19:34	9
	Сообщение от Goal не поленись и попробуй открыть в разных браузерах приведенный стиль для блока не поленился - и вот скриншоты вышеописанного примера Chrome 37, IE 11, FF 32, Opera 12.17 0

@ogsstudio 0 / 0 / 0 Регистрация: 28.11.2015 Сообщений: 3
	16.12.2015, 22:52	10
	Ребята помогите имеется блок DIV, внутри него еще один DIV, смысл в том что оба они используют один URL с изображением, но тот что родительский имеет большой размер, а второй что внутри него имеет малый размер ВОПРОС: как сделать чтоб фон родительского размывался, а сам DIV что внутри него не был размыт? а то у меня если размывает (свойством filter: blur(15px) ) то размывает полностью все что внутри этого блока, вместе с малым под чистую, нужно как-то вынуть тот блок что внутри на передний план чтоб он не блурился Это нужно чтоб работало постоянно (не зависимо от наведения курсора) Заранее спасибо если кто-то откликнется... уже голову сломал... 0

@almaz1994 33 / 33 / 15 Регистрация: 07.05.2014 Сообщений: 313
	16.12.2015, 23:03 [ТС]	11
	Сообщение от ogsstudio имеется блок DIV, внутри него еще один DIV, смысл в том что оба они используют один URL с изображением, но тот что родительский имеет большой размер, а второй что внутри него имеет малый размер Упакуй их в отдельный блок со стилем position:relative Затем абсолютно спозиционируй два блока (большой и маленький), задай z-index, и они не будут друг в друге Самое простое решение, на мой взгляд) 0