Свойство opacity

Кроме прозрачных цветов, в CSS есть свойство opacity. Оно делает прозрачным весь элемент целиком вместе со всем, что в нём есть: текстом, фоном и всеми вложенными элементами. Его значение — число от 0 (невидимый) до 1 (полностью непрозрачный, значение по умолчанию):

h1 {
	opacity: 0.5;
}

Чем это отличается от цвета с альфой? Альфа влияет только на тот единственный цвет, в котором мы её записали. Сравните два примера. В первом фон пурпурный с альфой 0.5 и белый текст; во втором — пурпурный фон, белый текст и opacity: 0.5:

background-color: rgba(255, 0, 229, 0.5)

opacity: 0.5

В первом примере прозрачен только фон, а текст остаётся ярко-белым. Во втором текст поблёк вместе с фоном.

Поэтому, когда нужно, чтобы прозрачным был только фон (или только текст), используйте цвет с альфой. Когда нужно приглушить элемент целиком — используйте opacity. Его часто применяют для эффектов с :hover, который вы знаете из урока о селекторах. Мы слегка приглушим список пород, и каждая порода будет «загораться», когда вы наведёте на неё указатель мыши.