CSS의 불투명도 속성을 사용하는 방법

opacity 속성은 요소의 불투명도를 설정하는 데 사용됩니다. 이는 각 요소에 대해 100% 불투명한 상태를 설정하지만 불투명도 값을 변경하여 요소의 투명도를 표시할 수 있습니다. CSS의 불투명도 속성 사용법을 자세히 소개합니다.

불투명도 속성을 사용하는 방법

다음과 같이 설명합니다

opacity: value; 값 부분에는 0.0부터 까지의 숫자값을 사용할 수 있습니다. 1.0은 불투명도를 지정합니다. 숫자가 클수록 불투명도가 높아지고 표시가 더 선명해집니다. 반대로 숫자가 작을수록 불투명도가 낮아지고 흐릿하게 보입니다. 또한 값에 상속을 입력하면 상위 요소의 값이 상속됩니다.

0.0~1.0 범위 밖에서 설정하더라도 이 범위 내에서는 적용 가능합니다(예: -1 → 0/2 → 1). 불투명도를 0으로 설정하면 완전히 투명해집니다. , 그리고 화면에서 사라집니다.

불투명도를 1로 설정하면 완전히 불투명해집니다. (초기값)

다음으로 불투명도 속성의 구체적인 예를 살펴보겠습니다

값이 소수점인 경우

코드는 다음과 같습니다

p>

HTML 코드

lt;!DOCTYPE htmlgt;

lt;htmlgt;

lt;headgt;

lt ;meta charset="utf-8" /gt;

lt; 링크 rel="stylesheet" href="sample.css" type="text/css"gt;

lt;/headgt;

lt;bodygt;

lt;divgt;

lt;pgt;값이 소수인 경우 lt;/pgt;

lt;/divgt;

lt;/bodygt;

lt;/htmlgt;CSS 코드

div {배경색: #b0e0e6; }

p {opacity: 0.5; } 여기서는 배경색 #b0e0e6으로 영역의 단락에 텍스트를 입력하고 불투명도 값을 변경합니다. 0.5로 설정합니다.

브라우저에서의 표시 효과는 다음과 같습니다.

문단의 문자 부분의 불투명도가 변경되어 약간 투명하게 보입니다. 또한 영역에서는 불투명도를 설정하지 않으므로 배경색의 불투명도는 변경되지 않습니다.

값이 0 또는 1인 경우

코드는 다음과 같습니다

HTML 코드

lt;!DOCTYPE htmlgt;

p>

lt;htmlgt;

lt;headgt;

lt;meta charset="utf-8" /gt;

lt;link rel=" stylesheet" href="sample.css" type="text/css"gt;

lt;/headgt;

lt;bodygt;

lt; divgt;

lt;p class="text1"gt;속성 값이 0lt;/pgt;일 때

lt;/divgt;

lt;divgt;

lt;p class="text2"gt;속성 값이 1lt;/pgt;

lt;/divgt;

lt;/bodygt;

lt;/htmlgt;CSS 코드

div {배경색: #b0e0e6;}

p.text1 {불투명도: 0; }

p.text2 {opacity: 1; }브라우저에 표시되는 효과는 다음과 같습니다.

첫 번째 줄의 텍스트는 완전히 투명하므로 표시되지 않습니다. 표시된 페이지에서 두 번째 줄의 텍스트는 완전히 불투명하므로 그대로 나타납니다.

초기값은 1이므로 상위 요소에 불투명도를 지정하지 않으면 불투명도가 변경되지 않습니다.

opacity 속성을 사용하여 이미지의 불투명도를 설정하는 방법을 살펴보겠습니다.

코드를 직접 살펴보겠습니다.

HTML 코드

lt;!DOCTYPE htmlgt;

lt;htmlgt;

lt;headgt;

lt;meta charset="utf-8" /gt;

p>

lt; 링크 rel="stylesheet" href="sample.css" type="text/css"gt; >

lt;

div class="cover"gt; > lt; 스팬 클래스= "inline"gt;

lt;i class="fa fa-code fa-l"gt;lt;/igt;

Gxlcmslt;/spangt ;

lt;/h2gt;

lt;p class="cover-caption"gt;불투명도 속성 사용 방법lt;/pgt;

lt ;/divgt;

lt;/bodygt;

lt;/htmlgt;CSS 코드

.cover {

배경 -image: url("img/ tupian.jpg");

너비: 100;

위치: 상대

오버플로: 숨김; >

배경 위치: 중앙;

배경 크기: 표지;

배경 반복: no-repeat; 브라우저는 다음과 같습니다

opacity 속성 값이 1이면 이미지 표시가 변경되지 않으므로 여기서는 자세히 설명하지 않겠습니다.

불투명도 속성 값이 0.5일 때 CSS 코드는 다음과 같습니다

.cover {

background-image: url("img/tupian.jpg ");

너비: 100;

위치: 상대;

오버플로: 숨김;

배경 위치: 중앙;

배경 크기: 덮개;

배경 반복: 반복 없음;

불투명도:

}효과는 다음과 같습니다. 다음

불투명도 속성값이 0.2일 경우 더욱 흐릿해지며 효과는 다음과 같습니다