Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> CSS Эффект матового стекла, Размытый текст на DIV с таким эффектом 
:(
    Опции темы
Elfix
Дата 3.6.2018, 16:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 160
Регистрация: 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 сверху имел нормальный неразмытый контур (текст, картинки и т. п.). Заранее благодарю!
PM MAIL   Вверх
ksnk
Дата 4.6.2018, 00:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

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



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
PM MAIL WWW Skype   Вверх
Elfix
Дата 4.6.2018, 19:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Спасибо!
PM MAIL   Вверх
Google
  Дата 24.10.2018, 02:32 (ссылка)  





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


 




[ Время генерации скрипта: 0.0589 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.