Пояснено властивість непрозорості CSS та непрозорість зображення

В opacityуправлінні нерухомістю , як непрозора елемент знаходиться на шкалі від 0,0 до 1,0. Чим нижче значення, тим прозоріший елемент.

Ви можете вибрати, наскільки ви хочете зробити елемент прозорим. Вам потрібно додати наступну властивість CSS, щоб досягти рівня прозорості.

Повністю непрозорий

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

Напівпрозорий

.class-name { opacity: 0.5; }

Повністю t прозорий

.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); }

Ось приклад кодового коду, щоб показати прозорість при наведенні курсору.

Детальніше про CSS

Каскадні таблиці стилів (CSS)

CSS - скорочення від каскадних таблиць стилів. Вперше він був винайдений у 1996 році, і зараз він є стандартною функцією всіх основних веб-браузерів.

CSS дозволяє розробникам контролювати, як виглядають веб-сторінки, "стилізуючи" структуру HTML цієї сторінки.

Специфікації CSS підтримуються Консорціумом World Wide Web (W3C).

Ви можете створити деякі досить дивовижні речі лише в CSS, наприклад, цю гру на чистому CSS Minesweeper (яка не використовує JavaScript).