CSS эквивалентен функции «Размытие фона» в Adobe XD?

Question

Разработка страницы на основе Adobe XD comp.

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

Я пытаюсь выяснить, какими будут эквиваленты CSS для следующих снимков экрана.

Размытый прямоугольник с не размытым текстом сверху:

XD настройки размытого прямоугольника:

На основе "Fill" и "81%" достаточно легко захватить HEXзначение, преобразуйте его в RGB, затем напишите background-color: rgba(54,93,62,0.81), но я понятия не имею, какой будет эквивалентный CSS для настроек «Размытие фона».

Answer 1

Это:

   -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5); 

Демо: https://codepen.io/igcorreia/pen/YJeQgb

Убедитесь, что вы проверили совместимость браузера. На начало 2019 года это не поддерживаетсяв Chrome или Firefox - поэтому на данный момент вам может понадобиться экспортировать сглаженное изображение со встроенным в него размытием.

Answer 2

Вы пытались взглянуть на особенности дизайна XD? Спецификации дизайна Adobe XD позволяют вам и вашим сотрудникам просматривать спецификации дизайна, опубликованные в Adobe XD, которые позволяют вам просматривать и комментировать потоки, измерения и стили.

1. Нажмите на ресурсв правом верхнем углу XD и нажмите «Опубликовать спецификации проекта»

В разделе «Экспорт для» выберите «Веб» (или «iOS» или «Android»)

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

• размытие
• яркость
• непрозрачность