VPF::CSS Эффект матового стекла - Форум программистов

Elfix

Дата 3.6.2018, 16:45 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 167
Регистрация: 13.7.2005

Репутация: нет
Всего: нет

Приветствую, мир!

Код


<!DOCTYPE html>
<html lang="ru">
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            html {
                width: 100%;
                height: 100%;
            }
            
            body {
                width: 100%;
                height: 100%;
                background: url(./city.jpg) no-repeat center top;
                background-attachment: fixed;
                background-size: cover;
            }
            
            #wrapper {
                height: 500px;
                width: 50%;
                background: inherit;
                filter: blur(3px);
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <p>Привет</p>
        </div>
    </body>
</html>

Сделал эффект матового стекла на div с wrapper.
Почему текст "Привет" отображается размытым? Как сделать эффект матового стекла, так чтобы фон был размыт, все что появляется на DIV сверху имел нормальный неразмытый контур (текст, картинки и т. п.). Заранее благодарю!

ksnk

Дата 4.6.2018, 00:08 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

https://developer.mozilla.org/ru/docs/Web/C...backdrop-filter ?

Вот это - не такое эксперимнтальное https://stackoverflow.com/questions/2003976...ackground-image

Это сообщение отредактировал(а) ksnk - 4.6.2018, 00:10

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Elfix

Дата 4.6.2018, 19:24 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 167
Регистрация: 13.7.2005

Репутация: нет
Всего: нет

Спасибо!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »