CSS에서 텍스트 불투명도 변경

1. CSS opacity 속성을 사용하여 CSS에서 텍스트 투명도 변경
2. rgba() 함수를 사용하여 CSS에서 텍스트 투명도 변경

이 기사에서는 CSS에서 텍스트 불투명도를 변경하는 두 가지 방법을 소개합니다.

CSS opacity 속성을 사용하여 CSS에서 텍스트 투명도 변경

opacity 속성은 요소의 투명도를 나타냅니다. 일반적으로 0에서 1까지의 척도로 표시되며 0은 완전히 투명합니다.

즉, 완전히 보이지 않습니다. 마찬가지로 1은 완전히 불투명하고 0.5는 50% 투명하므로 요소 불투명도의 벤치마크로 간주할 수 있습니다.

예를 들어 p 요소를 만들고 before 클래스를 만듭니다. p 요소 안에 원하는 텍스트를 입력합니다.

다음으로 after 클래스를 사용하여 유사한 p 요소를 만듭니다. CSS에서 before 클래스를 선택하고 red를 텍스트 색상으로 지정합니다.

after 클래스의 경우 색상을 red로, opacity 속성을 0.4로 설정하고 원하는 대로 0에서 1까지의 척도로 설정합니다.

마찬가지로 백분율을 통해 요소의 불투명도를 나타낼 수도 있습니다. 0%는 완전히 투명하고 100%는 완전히 불투명합니다. 0.4 대신 40%를 사용할 수도 있습니다.

예제 코드:

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color:red;
}
.after {
 color:red;
 opacity: 0.4;
}

rgba() 함수를 사용하여 CSS에서 텍스트 투명도 변경

rgba() 함수는 일반적으로 요소에 색상을 삽입하는 데 사용됩니다. rgba()의 문자는 빨강, 녹색, 파랑 및 알파를 나타냅니다.

함수가 4개의 값을 취함을 나타냅니다. 알파 옵션은 요소의 불투명도를 나타내는 확장입니다.

빨강, 파랑 또는 녹색의 강도를 0에서 255 또는 0%에서 100% 사이의 정수로 나타낼 수 있습니다. 불투명도의 경우 0-1 값과 0%-100% 범위를 지정할 수 있습니다.

color 속성의 옵션으로 rgba() 함수를 사용할 수 있습니다.

데모를 위해 위의 첫 번째 예와 동일한 HTML 템플릿을 사용합니다. before 클래스를 선택하고 CSS의 color 속성에 rgba() 함수를 작성합니다.

파란색의 색상 코드인 함수에 값 0, 0, 255를 씁니다. after 클래스에 동일한 색상 코드를 사용하지만 불투명도 값에 0.5를 추가합니다.

결과적으로 첫 번째 텍스트는 파란색으로 표시되고 두 번째 텍스트는 불투명도를 설정하면 덜 불투명해집니다.

예제 코드:

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color: rgba(0, 0, 255);
}

.after {
 color: rgba(0, 0, 255, 0.5);
}

따라서 모든 사실을 고려하여 opacity 속성과 rgba() 함수를 사용하여 텍스트 투명도를 변경했습니다.