Завтра национальный день траура, часть CSS сделает весь сайт серым

CSS

В целях выражения глубоких соболезнований людей всех этнических групп страны, принесших в жертву мучеников и погибших в борьбе с новой эпидемией коронарной пневмонии, Государственный совет опубликовал сегодня заявление, постановив провести общенациональное траурное мероприятие 4 апреля 2020 г. (завтра). В этот период национальные и иностранные посольства приспустили свои флаги, а массовые увеселительные мероприятия были приостановлены по всей стране.Начиная с 10:00 4 апреля, люди по всей стране соблюдали трехминутное молчание. корабли гудели, гудели сирены ПВО.

Думая, что когда я посещал сайт в день тишины в прошлом, я обнаружил, что весь сайт был бы полностью серым, то есть, если бы я начал разрабатывать и изменять схему дизайна сразу, это отняло бы много времени и энергии. .Будет ли CSS, который может напрямую обрабатывать все элементы?Они поседели, и сразу подумали о фильтре css3, а также подтвердили реализуемость этой идеи.

фильтр: оттенки серого используют значение оттенков серого элемента, которое можно настроить

.gray-filter {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

реальный бой

Возьмем, к примеру, станцию ​​B:

В обычных условиях панель навигации станции B фиксируется в верхней части страницы после перемещения вниз.

Но если вы добавите этот css в тело, произойдет следующее:

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

Я пошел в Google, чтобы проверить соответствующую информацию и нашел:

Когда задан стиль фильтра и значение не равно none, если в элементе, к которому применяется стиль, есть элементы, положение которых является абсолютным или фиксированным, для этих элементов будет создан новый контейнер, так что эти элементы с абсолютным или будет создано фиксированное позиционирование.Датум для его позиционирования относительно этого вновь созданного контейнера.

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

Как это решить?

Решение 1

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

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

Эффект:

Решение 2

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


<html>
    <body>
        <div class="gray-filter"></div>
    </body>
</html>

<style>
.fixed {
    position: fixed;
    top: 100px;
    left: 100px;
    height: 100px;
    width: 100px;
    background-color: #f00;
}
.gray-filter {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
</style>

Совместимость с IE

Многие друзья отметили, что младшая версия IE не поддерживает, что делать, поэтому я погуглил, и есть способ добиться этого. Метод реализации заключается в представлении градаций серого.js, демо-загрузка.grayscale.js Demo

После краткого просмотра исходного кода js я обнаружил, что такие атрибуты, как цвет, цвет фона, цвет границы и т. д., будут извлечены и заменены на серый цвет, а фоновое изображение и изображения будут отрисованы с помощью холста и обработаны. в серый цвет, а затем заменяется обработанным исходным изображением.

В демо-версии functions.js оценивает пользовательский агент браузера, чтобы определить тип и версию браузера и выполнить соответствующую обработку.

Ссылки и демонстрационные источники

Проблемы под апплетом

Я пытался добавить апплет WeChat на страницу, но фикс по-прежнему недействителен. Я могу использовать только второй метод для добавления стилей. Если у вас есть решение, вы можете прокомментировать и выдвинуть его. Давайте обсудим это вместе ~

Статьи по Теме:

CSS3 filter MDN

Справочные материалы и демонстрационные источники для совместимых решений IE

Если у вас есть какие-либо вопросы по первой статье, пожалуйста, сообщите, спасибо!

Категории