Прозрачность и полупрозрачность в CSS: Подробное руководство

Сколько раз было такое, что нужно было во время верстки сделать какой-то элемент прозрачным или полу прозрачным, причем после этого естественно идешь в Google и начинаешь тупо гуглить.

В рамках этого поста я расскажу и покажу как можно настроить прозрачность абсолютно любого объекта на сайте, не важно, что это картинка или видео, ну с текстом и фоном понятно, что это возможно тот самый минимум, прозрачность которого мы хотим добиться.

В CSS в основном есть три способа задать прозрачность любому блоку или объекту, но все эти способы отличаются по назначению, которое по правде зависит от вашей задачи.

Для всех примеров я буду использовать следующий пример:

В нем есть все что нужно, это картинка кнопка, блок целый сзади которого есть еще какой-то блок, у которого белый цвет.

В общем если что-то понадобится дополнительно, то естественно я добавлю что-то, но в целом это не обязательно.

Полная прозрачность с помощью visibility: hidden

Вот давай представим есть у нас следующий случай, когда нужно просто сделать объект полностью прозрачным, но при этом сохранить за собой место?

Для таких случаев вполне уместно использовать visibility: hidden

Как мы видим блок полностью исчез, но сразу возникает вопрос, а чем этот способ отличается от display: none или opacity: 0;

В целом этому есть очень внятное объяснение. Все они делают элементы невидимыми, но отличаются тем, занимают ли после применения место и использует ли они клики.

Вот к примеру, если вам нужно сделать этот блок полностью прозрачным, и при этом чтобы пользователь не имел возможности управлять объектами, которые находятся внутри, то ь visibility: hidden то что тебе нужно. Если это сделать с помощью display: none; то объект на который мы применили его, пропадет полностью будто бы мы удалили и html (при просмотре кода, сам код останется на месте).

А вот если вы решите сделать объект opacity: 0, пусть все и пропадет у пользователя из виду, но элементы будут активными, то есть текст можно будет выделить, а кнопки нажать, а картинку сохранить. Вот как это выглядит:

типы скрытия блоков в css

Есть разница правда?

Управление прозрачностью с помощью Opacity;

Из предыдущего примера можно увидеть, что свойство opacity всегда оставляет за собой возможность выполнять с объектом какие-то события, на пример выделение клики и так дальше, в целом все события, которые есть и у любого другого объекта в целом.

И при всем этом, мы можем задать любую интенсивность для прозрачности объекта. А значит, сделать текст или картинку полупрозрачной, или вообще прозрачной. Да в целом нет такого элемента на сайте, с которым opacity не будет работать, я даже попробовал видео на youtube сделать прозрачным и у меня получилось.

Если сравнить этот пример с самым первым элементом, то можно уверенно сказать, что прозрачность задана всем обьектам – так и есть.

Я задал прозрачность каждому, но при этом разную, например, у текста применено opacity: 0.9; вместе с ним возникает ощущение, будто мы сделали текст немного светлее, но цвет, как и был стандартным черным так и остался.

Для кнопки я за дал opacity: 0.7;, а для картинки opacity: 0.5; и это вообще заметно.

Как это можно применить на деле? Очень просто, бывало я задаю блокам легкую прозрачность, а вот когда наведем мышку на этот блок, то с помощью hover я задаю полную яркость, ну в общем получается круто.

 Как сделать прозрачный фон через rgba?

Вот еще один интересный способ, с которым можно задать прозрачность каждому объекту, которому через css мы задаем цвет.

Это могут быть:

  • Бордер;
  • Тень;
  • Фон;
  • Цвет текста;
  • И т.д.

Если стандартно мы задавали тексту цвет как-то так color: #20262e; в котором мы имеем три части

#(20 – насыщенность красного)(26 насыщенность зеленого)(2e и насыщенность синего)

По факту этот тип записи называется HEX (потому что значение в 16-тиричной системе счисления от 0 до F).

Поменять эту систему можно на другую, вместо HEX использовать RGB, смысл с ней не меняется, меняется только то как мы его записываем.

В стиле RBG запись будет следующей: rgb(32, 38, 46); это все тоже самое что и #20262e просто записано по другому.

Так вот, о чем это я – сюда можно добавить еще одно значение, а именно степень прозрачности.

Получается такая запись: rgb(32, 38, 46, 1), ну а это единицу, можно уже изменять так как нам угодно. Все это очень круто позволяет изменять Console Google Chrome

прозрачность в css

А после мы можем менять буквально все что нам угодно, например, я сейчас сделаю основной фон зеленым, а фон нашего блока красным, так получится мне наглядно показать, как это будет отображаться.

Получается такая картинка – очень рекомендую поиграться с этим делом, например, поставить цвет другой, или добавить прозрачный фон блока или еще можно добавить к блоку какой-то border, ну и задать какой-то интересный цвет, а после поиграться с его прозрачностью.

Если тебе статья показалась полезной, то не забудь поделиться ею с своей социальной сети, ну а сайт сохрани себе куда-нибудь в закладки. Это будет твоим небольшим спасибо мне, ну к тому же ты не потеряешь мой сайт и всегда сможешь научиться еще чему-то новому.

Оставьте комментарий