Непрозрачност в CSS е свойство, което указва да контролира прозрачността на елементи като съдържание или изображения . Използвайки това свойство, можем да настроим всички изображения да бъдат напълно непрозрачни ( видими ), напълно прозрачен ( скрит ), или полупрозрачни (частично видими). Приема цифрова стойност между 0 и 1. Където 0 дефинира напълно прозрачен, а 1 дефинира напълно видим. Стойностите на непрозрачност между 0 и 1, като 0,2, 0,4, 0,6 и т.н., променят изображението от прозрачно на непрозрачно чрез постепенно увеличаване на десетичната стойност.

Синтаксис

 opacity : 

Числовата стойност трябва да е между 0 и 1, за да направи изображението полупрозрачно. Ако предоставим 1, изображението ще бъде непрозрачно, ако числовата стойност е 0, изображението става напълно прозрачно.

Пример 1 : В този пример ще използваме свойството opacity, за да направим елемента прозрачен при преместване на мишката върху елемента.

Main.html

 Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. 

Изход

файл за промяна на linux

Задръжте мишката върху червеното поле, за да покажете ефект на прозрачност или непрозрачност.

Непрозрачност на прехода в CSS

В CSS, a непрозрачност на прехода е свойство, използвано за плавна промяна на състоянието на непрозрачност от едно ниво на друго състояние. Това означава, че непрозрачността на прехода променя състоянието на непрозрачния елемент на прозрачен с определена продължителност от време. Преходът има четири свойства: свойството на прехода, продължителността на прехода, функцията за време на прехода и забавянето на прехода, използвани за изпълнение на ефекта на непрозрачност върху изображение. The преход-продължителност е важно свойство за постепенни промени или внезапни промени, които отразяват ефекта на непрозрачност върху елемент за определен период от време в милисекунди или секунди.

Съкратеното свойство на прехода е както следва:

 transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay]; 

Синтаксис за дефиниране на непрозрачността на прехода в CSS

 { transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } 

Преходен имот

Следват свойствата на прехода, използвани за контролиране на ефектите на прехода.

Забележка: Докато задаваме свойството за преход към изображението или съдържанието, трябва да дефинираме свойството за продължителност на прехода; в противен случай продължителността става 0 и няма да покаже никакъв ефект.

Необходимостта от непрозрачност на прехода в CSS

The непрозрачност е просто CSS свойство, използвано за контролиране на прозрачността на изображение чрез задаване на обхвата на непрозрачност от 0 до 1. То отразява статичната или внезапна промяна на елемент, за да покаже ефекта на непрозрачност. Например, ако искаме да покажем изображение като прозрачно, трябва да зададем стойността на непрозрачност от 0 до 1. След това ефектът на непрозрачност се показва веднага, вместо да отнема известно време. Затова използваме a непрозрачност на прехода в CSS, който контролира прозрачността на даден елемент за определен период от време. Използвайки функцията за време на прехода в непрозрачността на прехода, можем да определим кривата на скоростта на елемент, който определя бързия ефект на непрозрачност върху изображение. По този начин ние използваме ефекта на непрозрачност на прехода, за да отразим промените в определения период от време, вместо да се случват веднага.

Пример 2: В този пример ще използваме свойството за непрозрачност на прехода, което отразява ефекта на непрозрачност за определен период от време вместо веднага.

Файл1.html

 CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p>  https://www.javatpoint.com/  </p> 

Изход