Css filter background: backdrop-filter — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Содержание

Фоновый фильтр | Windi CSS

Утилиты для включения и отключения фоновых фильтров для элемента.

default

none

Backdrop Blur

default

sm

md

lg

xl

2xl

3xl

1

2

3

9

12

24px

2rem

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    фонРазмытие: {
      «4xl»: «72 пикселя»,
      «5xl»: «96px',
      «6xl»: «128 пикселей»,
    },
  },
}

Backdrop Brightness

50

75

90

95

100

105

110

115

125

150

175

200

251

Customizing

windi.config. js

 экспорт по умолчанию {
  тема: {
    Яркость фона: {
      см: '50',
      мд: '100',
      лг: '150',
    },
  },
}

Контраст фона

50

75

90

95

100

105

110

125

150

175

2009000

25103

.
По умолчанию { тема: { фонКонтрастность: { см: ’50’, мд: ‘100’, лг: ‘150’, }, }, }

Фон Оттенки серого

по умолчанию

5

10

20

25

30

40

50

60

70

75

80

90

95

100

Customizing

Windi.config.js

. Экспорт {
  тема: {
    фонОттенки серого: {
      50: «0,5»,
      80: «0,8»,
    },
  },
}

Фоловый оттенок вращения

15

30

45

60

90

120

180

-120

-90

0003

-60

-45

-30

-15

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    фонHueRotate: {
      см: '60',
      лг: '90',
      XL: «180»,
    },
  },
}

Backdrop Invert

default

5

10

20

25

30

40

50

60

70

75

80

90

95

100

Настройка

windi. config.js

 экспорт по умолчанию {
  тема: {
    фонИнвертировать: {
      см: «0,5»,
      лг: '0,8',
    },
  },
}

Backdrop Opacity

5

10

20

25

30

40

50

60

70

75

80

90

95

100

Customizing

windi .config.js

 экспорт по умолчанию {
  тема: {
    Непрозрачность фона: {
      см: «0,5»,
      лг: '0,8',
    },
  },
}

Backdrop Saturate

default

5

10

20

25

30

40

50

60

70

75

80

90

95

100

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    фонНасыщение: {
      см: «0,5»,
      мд: '1',
      лг: '1,5',
    },
  },
}

Фоновая сепия

по умолчанию

5

10

20

25

30

40

50

60

70

75

800003

95

9000. 1000003.
 экспорт по умолчанию {
  тема: {
    фонСепия: {
      см: «0,5»,
      мд: '0,8',
    },
  },
}

Кроссбраузерная совместимость фонового фильтра CSS в Microsoft Edge 15

Последнее обновление: 30 июня 2022 г.

Примечание:

Фоновый фильтр CSS — Не поддерживается в Microsoft Edge 15 . Проще говоря, если ваш веб-сайт или веб-страница использует фоновый фильтр CSS, то любой пользователь, получающий доступ к вашей странице через браузер Microsoft Edge 15, будет иметь безупречный опыт просмотра. Если представление несовместимо между браузерами, то, вероятно, это связано с какой-то другой веб-технологией, кроме CSS Backdrop Filter.

Обзор

Свойство css-backdrop-filter обеспечивает эффект фильтра фонового изображения CSS, который заставляет элементы ниже целевого элемента применять фильтры или эффекты к фоновому изображению.

LT Browser — браузер нового поколения для создания, тестирования и отладки адаптивных мобильных веб-сайтов

Check LT Browser

Free Forever

LT Debug — лучшее расширение Chrome для устранения проблем с веб-сайтами и ускорения разработки

Добавить в Chrome

Не поддерживается

Оценка совместимости браузера

Microsoft Edge

15

Не поддерживается

Протестируйте свой веб-сайт в более чем 3000 браузерах

Обеспечьте тестирование на кросс-браузерную совместимость для Фоновый фильтр CSS и другие веб-технологии. Вы можете проверить совместимость своего веб-сайта или веб-приложения с тысячами комбинаций браузеров и ОС на LambdaTest.

Протестируйте сейчас в Microsoft Edge 15

Зачем проводить тестирование в Microsoft Edge 15

Чтобы разработать правильную стратегию тестирования, важно понимать, сколько пользователей на самом деле использует Microsoft Edge 15
Чтобы помочь вам построить правильную матрицу тестирования браузера, вот общая доля рынка как браузера Microsoft Edge, так и Microsoft Edge версии 15.

TOP Microsoft Edge BROWSERS (Jan 2021 — Jan 2022)

Browser Version
% Share
Release Date

Edge 96

8.59

2021-12-17

Edge 95

0.34

2021-10-21

Edge 18

0.07

2018-11-13

Edge 94

0.06

2021-09-24

Edge 92

0.04

2021-07-22

Edge 87

0,03

2020-11-19

Edge 15

0,01

2017-04-11

ДРУГИЕ

1. 1

—

Источник данных: Statcounter.com

.

Browsers
% Share

Chrome

66.38

Chrome

65.38

Chrome

65.38

Safari

9.85

Safari

9.85

Safari

9.81

Edge

9.53

Другие

63.8

Источник данных: Statcounter.com

ВЕБ -технологии поддержка Microsoft Edge 15

Для создания стратегии автоматизации для проверки вашего WebApps на Edge 15

сначала нужно проверить, какие технологии поддерживаются в Microsoft Edge 15.

Вот список всех веб-технологий, классифицированных по уровню поддержки для Microsoft Edge 15.

  • Поддерживается (без префиксов)
  • Supported (some prefix)
  • At least partially supported
  • No support

Browser Support for CSS Backdrop Filter

Browser Support For IE Versions

—

Fully

—

Partially

11-5. 5

Не поддерживается

Тестирование в IE

Поддержка браузера для версий Edge

103-17

Полностью

—

Частично

2

2 160-102 1060-170002 не поддерживается

Тест на краю

Бруузер.

106-76

Полностью

—

Частично

75-4

Не поддерживается0002 16-9.1

Полностью

—

Частично

8-3.2

Не поддерживается

Тест на Safari

Брурочный 63-9.5

Не поддерживается

Тестирование в Opera

Поддержка браузером Safari в версиях iOS

16-9.3

Полностью

—

90-002 Частично

2

3

30002 Не поддерживается

Тест на Safari на IOS

Поддержка браузера для версий браузера Android

103-97

Полностью

—

Частично

4-2.3

Не поддерживается

Тест на и прозвище. Поддержка версий Opera Mobile

64-64

Полностью

—

Частично

12-10

Не поддерживается0003

103-97

Полностью

—

Частично

—

Не поддерживается

Тест на Chrome для Android

Бруузер Не поддерживается0003

11. 1-4

Не поддерживается

Тестирование в Samsung Internet

О Microsoft Edge

Флагманский браузер, созданный Microsoft, представляет собой кроссплатформенный веб-браузер, который предварительно загружается и устанавливается по умолчанию для компьютеров Windows. С …… % доли мирового рынка браузеров, он становится широко популярным. Тем более, что он выпустил свои версии на основе Chromium.

Первоначально созданный с использованием проприетарного браузерного движка Microsoft EdgeHTML и их движка Chakra JavaScript, он назывался как Microsoft Edge Legacy . Однако его первая версия была выпущена в 2015 году для Windows 10 и Xbox One, за ней последовали версии для Android и iOS, выпущенные в 2017 году. Представленный в 2019 году, The Edge был выпущен с исходным кодом Chromium. Основанный на открытом исходном коде, он позволяет каналам Beta, Developer и Canary изменять и тестировать исходный код и дает им полную свободу действий.

С момента выпуска браузеров Edge на базе Chromium его растущая популярность побудила Microsoft выпустить его для macOS и Linux.

Говоря об обновлениях, бета-канал является наиболее стабильным и получает крупное обновление каждые шесть недель. Dev Channel — это то место, куда вы можете обратиться, если хотите получать еженедельные обновления и первыми тестировать функции, протестированные и проверенные командой Microsoft Edge. Хотя это и небезопасно для ошибок, это «самый безопасный» способ увидеть некоторые из предстоящих передовых функций. Однако Canary Channel автоматически обновляется каждую ночь. Обычно считается нестабильным и наименее рекомендуется использовать его в повседневной сети.

Новый Microsoft Edge заменил устаревшую версию значком «волна». Он хорошо интегрирован во все платформы машин Windows 11 и +. Это позволяет пользователям использовать голосового помощника Cortana, например, для выполнения голосового поиска или сохранения информации прямо в OneDrive без каких-либо хлопот.

Загрузите Microsoft Edge

Загрузите последнюю версию Microsoft Edge с официального сайта Microsoft.

Ресурсы:

Протестируйте свой веб-сайт на последних и устаревших версиях Microsoft Edge

LambdaTest позволяет мгновенно получить доступ к вашему веб-сайту или веб-приложению в различных версиях браузера Microsoft Edge, даже в устаревших версиях Microsoft Edge, которые не основаны на Chromium.

Начать бесплатное тестирование. Веб-документы Mozzila MDN (https://developer.mozilla.org/en-US/)

  • Web.Dev (https://web.dev/)
  • Статус платформы Chrome (https://chromestatus.com/features)
  • Статус функции WebKit (https://webkit.org/status/)

    • Поддержка браузером фонового фильтра CSS

    • Chrome
    • Safari
    • Firefox
    • Internet Explorer
    • Opera
    • Edge

    Поддержка фонового фильтра CSS в Google Chrome

    Поддержка фонового фильтра CSS в Microsoft Edge

    Поддержка фонового фильтра CSS в Mozilla Firefox

    Поддержка фонового фильтра CSS в Internet Explorer

    Поддержка фонового фильтра CSS в Opera

    Поддержка фонового фильтра CSS в Safari

    LT Debug — лучшее расширение Chrome для
    отладки веб-проблем и ускорения
    вашей разработки

    Добавить на Chrome

    Браузер LT — браузер нового поколения для
    создание, тестирование и отладка отзывчивых
    мобильных веб-сайтов

    Check LT Browser

    Бесплатный навсегда

    Тестовый фоновый фильтр CSS на реальном Microsoft Edge 15

    Протестируйте эту и другие функции вашего веб-сайта на совместимость с 3000 реальных браузеров и устройств с помощью

    Начать бесплатное тестирование

    Была ли эта статья полезной?

    X

    Мы используем файлы cookie, чтобы предоставить вам лучший опыт.

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

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