불투명 CSS에서는 다음과 같은 요소의 투명도를 제어하도록 지정하는 속성입니다. 콘텐츠 또는 이미지 . 이 속성을 사용하면 모든 이미지를 완전히 불투명하게 설정할 수 있습니다( 보이는 ), 완전 투명( 숨겨진 ) 또는 반투명(부분적으로 표시됨)입니다. 0과 1 사이의 숫자 값을 사용합니다. 여기서 0은 완전히 투명함을 정의하고 1은 완전히 표시됨을 정의합니다. 0.2, 0.4, 0.6 등과 같이 0과 1 사이의 불투명도 값은 소수 값을 점진적으로 증가시켜 이미지를 투명에서 불투명으로 변경합니다.

통사론

 opacity : 

이미지를 반투명하게 만들려면 숫자 값이 0에서 1 사이여야 합니다. 1을 제공하면 이미지가 불투명해지고, 숫자 값이 0이면 이미지가 완전히 투명해집니다.

리틱 로샨 나이

실시예 1 : 이 예에서는 불투명도 속성을 사용하여 요소 위로 마우스를 이동할 때 요소를 투명하게 만듭니다.

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. 

산출

투명 또는 불투명 효과를 표시하려면 빨간색 상자 위에 마우스를 놓습니다.

변경 열 추가 오라클

CSS의 전환 불투명도

CSS에서는 전환 불투명도 불투명도 상태를 한 수준에서 다른 수준으로 원활하게 변경하는 데 사용되는 속성입니다. 이는 전환 불투명도가 정의된 기간 동안 불투명 요소의 상태를 투명으로 변경함을 의미합니다. 전환에는 이미지에 불투명도 효과를 수행하는 데 사용되는 전환 속성, 전환 기간, 전환 타이밍 함수 및 전환 지연의 네 가지 속성이 있습니다. 그만큼 전환 기간 밀리초 또는 초 단위로 정의된 기간 동안 요소에 대한 불투명도 효과를 반영하는 점진적인 변화 또는 급격한 변화에 중요한 속성입니다.

전환의 단축 속성은 다음과 같습니다.

 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에서 전환 불투명도의 필요성

그만큼 불투명 불투명도 범위를 0에서 1까지 설정하여 이미지의 투명도를 제어하는 ​​데 사용되는 간단한 CSS 속성입니다. 요소의 정적 또는 급격한 변화를 반영하여 불투명도 효과를 표시합니다. 예를 들어 이미지를 투명하게 표시하려면 불투명도 값을 0에서 1로 설정해야 합니다. 그 후에는 시간이 걸리지 않고 즉시 불투명도 효과가 나타납니다. 그러므로 우리는 전환 불투명도 정의된 기간 동안 요소의 투명도를 제어하는 ​​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> 

산출

이진 트리의 후위 순회