Как сделать размытие фона в css

Размытие Фона-CSS

Здравствуйте , я пытаюсь сделать это размытие фона, как это изображение, поэтому я хотел бы знать, могу ли я сделать это только с помощью CSS3 или мне нужно использовать Javascript & Jquery:
И если я буду использовать css только как сделать размытие отзывчивым.

enter image description here

Вот мой простой код:

2 ответа

Я сделал UIViewController , который соответствует протоколу UITableViewDataSource и UITableViewDelegate и имеет UITableView в качестве подвида. Я установил свойство backgroundView таблицы равным UIImageView , чтобы отобразить изображение в качестве фона таблицы. Чтобы иметь пользовательские.

Я исправил фоновое изображение, и после scroll я хочу, чтобы изображение стало размытым. Я знаю, как сделать размытие в css, но делаю это в определенной позиции scroll. Вот пример: https://medium.com/good-music/f160ba9e6c52 Любые мысли, примеры, советы фрагментов будут полезны. Спасибо

Чтобы размыть весь фон

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

Вы можете иметь размытый фон в css с div, размещенным за содержимым вашего сайта, и размыть этот div вот так : http://codepen.io/aniketpant/pen/DsEve

Размытие за элементом

Вы можете получить этот результат с помощью фильтра фона CSS3:

вы можете использовать background-attachment:fixed; и установить его также в контейнере blured , background-attachment есть, чтобы установить оба bg на одном месте, один может быть blured.

пример с псевдо вместо дополнительного div:

render from FF 52

Похожие вопросы:

Моя проблема-размытие фона webview при прокрутке. Фон — это изображение. Мой код : WebView webview = (WebView) findViewById(R.id.webview); webview.setBackgroundColor(0x00000000);.

Мне нужен эффект Vista/7-aero-glass-style для всплывающего окна на моем сайте, и он должен быть динамичным. Меня вполне устраивает, что это не кроссбраузерный эффект, пока сайт все еще работает во.

Я ищу способ получить размытый фоновый эффект OS X 10.10, работающий в css. Размытие с помощью фильтра Гаусса filter:blur или SVG также приведет к размытию границы, так что это не сработает. Вот.

Я сделал UIViewController , который соответствует протоколу UITableViewDataSource и UITableViewDelegate и имеет UITableView в качестве подвида. Я установил свойство backgroundView таблицы равным.

Я исправил фоновое изображение, и после scroll я хочу, чтобы изображение стало размытым. Я знаю, как сделать размытие в css, но делаю это в определенной позиции scroll. Вот пример.

Я хотел бы иметь размытие фона на scroll. Это работает, но все внутри секции становится размытым. Я бы хотел, чтобы фоновое изображение было только размытым. Кто-нибудь может помочь? Мой код .

Нужна помощь, чтобы создать это размытие фона без размытия текста. Я пробовал использовать свойство фильтра css, но не смог заставить его выглядеть так. Я не акула CSS, поэтому надеюсь, что кто-то.

Как установить размытие фона при создании диалогового окна? Я нашел только DialogFragment и AlertDialog , но я хочу установить Dialog в activity Как его создать или что рекомендует библиотека? final.

Я пробовал увеличить размытие фона с помощью ползунка диалогового окна оповещения, но он не обновляется. Когда я напечатал значение, оно показывает обновление value.What’s, вызывающее это. Это мой.

Я использую этот CSS для слайдов в Slick slider: backdrop-filter: blur(10px) Однако, когда я нажимаю, чтобы отобразить следующий слайд, размытие CSS исчезает на секунду, а затем слайд снова.

Делаем размытый background на HTML и CSS

Что бы сделать размытый background, а на нём нормальный текст используем html контейнер:
<div /> <div /> <div /> <h3>Четкий заголовок</h3>
<p>Четкий текст за которым размытый фон</p>
</div>
</div>

и применим такие стили css:
.blur-block <
position: relative;
>
.bckgr-blur <
background-image: url("https://site.com/KARTINKA.jpg");
filter: blur(8px);
-webkit-filter: blur(8px);
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>
.str-txt <
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
color: white;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
>

Четкий заголовок

Четкий текст за которым размытый фон

Такой вот простой способ размыть фон на CSS. Можно использовать в слайдерах, при hover или в связке с js при разных событиях. Пишите комменты, делитесь статьёй в соц. сетях &#128521;

Размытие фона с помощью CSS

Я хочу Vista / 7-эффект Аэро-стекла на всплывающем окне на моем сайте, и он должен быть динамичным. Я в порядке с этим, не будучи кросс-браузерным эффектом, пока сайт все еще работает на всех современных браузерах.

моей первой попыткой было использовать что-то вроде

однако, как я и ожидал,в результате контент размытого диалога и фон остается ясным. есть ли способ использовать CSS для размытия фона полупрозрачного элемента вместо его содержимого?

7 ответов

OCT. 2016 обновление

С -moz-element() свойство, похоже, широко не поддерживается другими браузерами, кроме FF, есть еще более простой метод для применения размытия, не влияя на содержимое контейнера. Использование псевдоэлементов идеально в этом случае в сочетании с фильтром размытия svg.

(демо было протестировано в FF v49, Chrome v53, Opera 40-IE, похоже, не поддерживает размытие ни с css, ни с svg-фильтром)

единственный способ (до сих пор) иметь эффект размытия в фоновом режиме без плагинов js-это использование -moz-element() свойства в сочетании с svg фильтр размытия. С -moz-element() элемент можно определить как фоновое изображение другого элемента. Затем вы применяете svg фильтр размытия. Необязательно: вы можете использовать jQuery для прокрутки, если ваш фон находится в fixed позиция.

Я понимаю, что это довольно сложное решение и ограничено FF ( element() применяется только к Mozilla на данный момент с -moz-element() свойство), но, по крайней мере, было некоторые усилия в прошлом для реализации в браузерах WebKit и, надеюсь, он будет реализован в будущем.

вы можете использовать псевдо-элемент для позиционирования в качестве фона содержимого с тем же изображением, что и фон, но размытый новым фильтром CSS3.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *