Прозрачность в CSS на примере
Сделать элемент полупрозрачным на сайте при помощи CSS можно несколькими способами. Разберем самый распространенный.
Opacity
Прозрачность задается свойством opacity: 0.5
, где 0 - полностью прозрачное, а 1 - не прозрачный. Шаг значений в 0.1
Допустим, у нас есть вот такая картинка:
Давайте ей зададим ей полупрозрачность в 50%. За картинкой размещу красный блок, чтобы было видно работу прозрачности.
img {opacity: 0.5;}
Наведите мышку на картинку и увидите как она становится снова не прозрачной, т.е. получает свойство opacity: 1;
.
В данном случае мне пришлось взять картинку в контейнер:
.primer-opacity-1 {background: red;}
.primer-opacity-1 img {opacity: 0.5;}
.primer-opacity-1 img:hover {opacity: 1;}