Часть слайдера сделать прозрачнее(HTML, CSS, JS)
я немного новичок в сфере frontend-development. Верстаю сайт по макету из фигмы. Как можно сделать часть слайдера чуть прозрачной, как на макете?
Как написать стили для слайдера в таком случае
Ответы (1 шт):
Автор решения: Petəíŕd the Wizard
→ Ссылка
Используйте opacity:
element {
opacity: 0.5;
}
Нужно заменить element на CSS-селектор элемента, которого надо сделать прозрачнее (можно использовать дополнительный класс, например, .translucent).
Если надо оставить контент элемента непрозрачным, а фон полупрозрачным, используйте цвет фона с альфа-каналом (MDN документация для RGBA и HEX):
element {
/* rgba альфа канал */
background-color: rgba(255, 0, 0, 0.5);
/* hex альфа канал */
background-color: #ff000088;
}
В этом примере использован красный цвет.
Можно использовать и тот и другой формат, но rgba более читабелен и прост.
Опять же, можно изменять альфа-канал (0.5 для RGBA и 88 для HEX, в конце).