У меня есть файл JPEG, который я использую в качестве фонового изображения для страницы поиска, и я использую CSS, чтобы установить его, потому что я работаю в контекстах Backbone.js :
background-image: url("whatever.jpg");Я хочу применить CSS 3 фильтр размытия только к фону, но я не уверен, как стилизовать только этот элемент. Если я попробую:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);чуть ниже background-imageв моем CSS, он стилизует всю страницу, а не только фон. Есть ли способ выбрать только изображение и применить к нему фильтр? В качестве альтернативы, есть ли способ просто отключить размытие для каждого другого элемента на странице?
Ответы:
Проверьте эту ручку .
Вам придется использовать два разных контейнера, один для фонового изображения, а другой для вашего контента.
В этом примере я создал два контейнера
.background-imageи.content.Оба они размещены с
position: fixedиleft: 0; right: 0;. Разница в их отображении заключается вz-indexзначениях, которые были установлены по-разному для элементов.Извинения за текст Lorem Ipsum .
Обновить
Спасибо Мэтью Уилкоксону за лучшую реализацию с использованием
.content:beforehttp://codepen.io/akademy/pen/FlkzBисточник
ручка
Устранение необходимости в дополнительном элементе наряду с приведением содержимого в соответствие с потоком документов, а не фиксированным / абсолютным, как в других решениях.
Достигается с помощью
Необходимо автоматическое переполнение, иначе фон будет смещен на несколько пикселей вверху.
После этого вам просто нужно
РЕДАКТИРОВАТЬ Если вы хотите удалить белые границы по краям, используйте ширину и высоту,
110%а также левую и верхнюю части-5%. Это немного увеличит ваши фоны - но не должно быть сплошного цветового кровотечения с краев.Обновленный Pen здесь: https://codepen.io/anon/pen/QgyewB - Спасибо Чэду Фосетту за предложение.
источник
widthиheightдо ,110%а затем добавить смещение-5%кtopиleftотcontent:beforeкласса.Как указано в других ответах, это может быть достигнуто с помощью:
Вы также можете использовать
backdrop-filterСуществует поддерживаемое свойство, которое называется
backdrop-filterи в настоящее время поддерживается в Chrome 76, Edge , Safari и iOS Safari ( статистику см. В разделе caniuse.com ).Из Mozilla Devdocs :
Смотрите caniuse.com для статистики использования.
Вы бы использовали это так:
Обновление (12/06/2019) : Chromium будет поставляться с
backdrop-filterвключенным по умолчанию в версии 76, которая должна быть выпущена 30/07/2019 .Обновление (01/06/2019) : команда Mozzilla Firefox объявила, что скоро приступит к ее реализации.
Обновление (21/05/2019) : только что анонсированный Chromium
backdrop-filterдоступен в Chrome Canary без флажка «Включить функции экспериментальной веб-платформы». Это означает, чтоbackdrop-filterэто очень близко к реализации на всех платформах Chrome.источник
Вам нужно реструктурировать свой HTML , чтобы сделать это. Вы должны размыть весь элемент, чтобы размыть фон. Так что если вы хотите размыть только фон, это должен быть его собственный элемент.
источник
Пожалуйста, проверьте код ниже: -
источник
Ниже приведено простое решение для современных браузеров на чистом CSS с псевдоэлементом «до», как, например, решение Мэтью Уилкоксона.
Чтобы избежать необходимости доступа к псевдоэлементу для изменения изображения и других атрибутов в JavaScript, просто используйте
inheritв качестве значения и обращайтесь к ним через родительский элемент (здесьbody).источник
На
.contentвкладке в CSS измените его наposition:absolute. В противном случае отображаемая страница не будет прокручиваться.источник
Хотя все упомянутые решения очень умны, у всех, казалось, были незначительные проблемы или потенциальный удар по эффектам с другими элементами на странице, когда я их пробовал.
В конце концов, чтобы сэкономить время, я просто вернулся к своему старому решению: я использовал Paint.NET и перешел к Effects, Gaussian Blur с радиусом от 5 до 10 пикселей и просто сохранил его как изображение страницы. :-)
HTML:
CSS:
РЕДАКТИРОВАТЬ:
Я наконец получил это, но решение ни в коем случае не является простым! Посмотреть здесь:
источник
Все, что вам действительно нужно, это «фильтр»:
источник
Конечно, это не CSS-решение, но вы можете использовать CDN Proton с
filter:Это от https://developer.wordpress.com/docs/photon/api/#filter
источник
localhostвремя тестирования?Я не писал этого, но заметил, что для частично поддерживаемого
backdrop-filterс помощью компилятора CSS SASS существует полифил , поэтому, если у вас есть конвейер компиляции, это может быть достигнуто красиво (он также использует TypeScript):https://codepen.io/mixal_bl4/pen/EwPMWo
источник
источник
Этот ответ предназначен для горизонтального макета карты Material Design с динамической высотой и изображением.
Чтобы предотвратить искажение изображения из-за динамической высоты карты, вы можете использовать фоновое изображение-заполнитель с размытостью для корректировки изменений высоты.
объяснение
<div>с классом , которая представляет собой flexbox.<a>, класс ссылка , позиционируется по отношению .<div>класс размытия и<img>класс рис , который является четким изображением.width: 100%, но класс pic имеет более высокий порядок стека, т.z-index: 2Е. Размещает его над заполнителем.Код
источник
Теперь это стало еще проще и гибче благодаря использованию CSS GRID. Вам просто нужно перекрыть размытый фон (imgbg) с текстом (h2)
и CSS:
источник
источник
Без использования псевдокласса из
источник
Если вы хотите, чтобы содержимое было прокручиваемым, установите абсолютную позицию содержимого:
Я не знаю, было ли это только для меня, но если нет, то это исправление!
Также, поскольку фон исправлен, это означает, что у вас есть эффект "параллакса" ! Так что теперь этот человек не только научил вас делать размытый фон, но и стал эффектом параллакса!
источник