Оформление SVG-фигур / Прозрачность заливки [2/20]
×

Прозрачность заливки [2/20]

Управлять прозрачностью заливки можно с помощью свойства fill-opacity. Прозрачность также можно задавать как атрибутом, так и через CSS.

Значение задаётся числом от 0 до 1, например:

<rect width="150" height="100" fill="gold" fill-opacity="0.5"></rect>
rect {
  fill: gold;
  fill-opacity: 0.5;
}

Прозрачность работает для всех видов заливок, в том числе для градиентов и паттернов:

Начните учить английский в Skyeng и получите годовую подписку на HTML Academy!

Выполнить задание
HTML
<svg width="300" height="150"> <circle r="60" cx="75" cy="50%" fill="#ff7700"></circle> <circle r="60" cx="150" cy="50%" fill="hsla(50, 100%, 50%, 0.5)"></circle> <circle class="shape-opacity" r="60" cx="225" cy="50%"></circle> </svg>
CSS
svg { border: 1px solid #dddddd; } .shape-opacity { fill: yellowgreen; }
HTML Academy
  1. Задайте первой фигуре прозрачность с помощью атрибута fill-opacity="0.5".
  2. Задайте третьей фигуре прозрачность с помощью CSS fill-opacity: 0.75.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #11, который стартует 22 мая.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.