Обяснено свойство на CSS непрозрачност и непрозрачност на изображението

На opacityконтролите собственост как непрозрачен елемент е по скала от 0,0 до 1,0. Колкото по-ниска е стойността, толкова по-прозрачен е елементът.

Можете да изберете до каква степен искате да направите елемента прозрачен. Трябва да добавите следното свойство CSS, за да постигнете нивата на прозрачност.

Напълно непрозрачен

.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }

Полупрозрачен

.class-name { opacity: 0.5; }

Напълно прозрачно

.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }

Като алтернатива можете да използвате, за rgbaда зададете непрозрачността на елемент:

.class-name{ background-color: rgba(0, 0, 0, .5); }

Това задава background-colorчерно на елемент с непрозрачност 50%. Последната стойност в дадена rgbaстойност е алфа стойността . Алфа стойност 1 е равна на 100% непрозрачност, а 0,5 (или .5 като по-горе) е равна на 50% непрозрачност.

Непрозрачност и прозрачност на изображението

В opacityимота ви позволява да направите изображение прозрачен чрез намаляване как непрозрачно е то.

Opacity приема стойност между 0,0 и 1,0.

1.0 е стойността по подразбиране за всяко изображение. Той е напълно непрозрачен.

Пример

img { opacity: 0.3; }

Включете filter: alpha(opacity=x)за IE8 и по-стари версии. X приема стойност от 0-100.

img { opacity: 0.3; filter: alpha(opacity=30); }

Ето пример за изображение, зададено на параметрите в примера по-горе.

изображение с 30% непрозрачност

Можете да се сдвоите opacityс, за :hoverда създадете динамичен ефект на пренасочване.

Пример:

img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Пример за код за показване на прозрачно изображение, превръщащо се в непрозрачно при навеждане

Можете да създадете обратния ефект с по-малко код, тъй като изображението по подразбиране е 1,0 непрозрачност

Пример:

img:hover { opacity: 0.3; filter: alpha(opacity=30); }

Ето пример за codepen за показване на прозрачност при нанасяне на мишката.

Повече за CSS

Каскадни таблици със стилове (CSS)

CSS е съкращение от Cascading Style Sheets. За първи път е изобретен през 1996 г. и сега е стандартна характеристика на всички основни уеб браузъри.

CSS позволява на разработчиците да контролират как изглеждат уеб страниците, като „оформят“ HTML структурата на тази страница.

CSS спецификациите се поддържат от World Wide Web Consortium (W3C).

Можете да създадете някои доста невероятни неща само в CSS, като тази игра с чист CSS Minesweeper (която не използва JavaScript).