Що потрібно знати про градієнтах і «прозорому чорному»

30

Від автора: наприклад, у вас є градієнт в CSS від червоного кольору до прозорості. Просто, так адже? Ну, прям от так, як показано нижче.

.element {
background: linear-gradient(
to bottom,
red,
transparent
);
}

Однак тут є великий нюанс. У Chrome (і на Android), Firefox і Edge все відображається нормально.

Что нужно знать о градиентах и «прозрачном черном»

Але в Safari (і на iOS в тому числі) все не так добре.

Что нужно знать о градиентах и «прозрачном черном»

Наскільки я зрозумів, суть у тому, що прозорий колір сприймається як «прозорий чорний». Виправити проблему можна, вказавши повну версію прозорого кольору. Ось так:

.element {
background: linear-gradient(
to bottom,
red,
rgba(255, 0, 0, 0)
)
}

З hex коди не завжди так просто підібрати колір, дуже складно знайти еквівалентний колір RGBa або # hsla-color hsla. Хоча можна запросто знайти в мережі конвертер для кольору.

В специфікації CSS Level 4 є функція color(), що спрощує цю задачу:

.element {
background: linear-gradient(
to bottom,
#eb8fa9,
color(#eb8fa9 alpha(0%)) /* або це color-mod()? */
)
}

Ця функція ще не підтримується. Допомогти може Sass:

.element {
background: linear-gradient(
to bottom,
#eb8fa9,
rgba(#eb8fa9, 0);
)
}