CSS에서 배경 불투명도 설정
이 기사에서는 CSS를 사용하여 HTML에서 투명 색상을 만드는 세 가지 방법을 소개합니다. CSS에서 배경 불투명도를 설정합니다.
opacity 속성을 사용하여 CSS에서 투명 색상 만들기
opacity는 특히 색상과 함께 CSS에서 사용되는 속성 중 하나입니다. 0에서 1 사이의 값을 사용하여 색상 또는 요소의 불투명도를 표시할 수 있습니다. 값이 1이면 색상이 100% 불투명하다는 의미입니다. 색상이 전혀 투명하지 않음을 의미합니다. 처음에 값을 줄이면 요소가 더 투명해집니다. opacity 값이 0.5이면 색상이 반투명하거나 50% 투명해집니다. 그러나 opacity를 사용하는 동안 자식 요소도 투명해집니다.
예를 들어, 제목이 h1이고 클래스가 transparent인 HTML 문서를 작성하십시오. CSS에서 transparent 클래스를 선택한 후 background-color를 #cc33ff로 설정하고 opacity 값을 0.4로 설정합니다. 제목과 배경색을 더 투명하게 하려면 불투명도 값을 줄일 수 있습니다.
아래 예는 opacity 값, 즉 0.4를 유지함에 따라 배경색과 제목 h1이 투명해지는 것을 보여줍니다.
예제 코드:
<h1 class="transparent"> Hello world </h1>
.transparent{
background-color: #cc33ff;
opacity: 0.4;
}
rgba() 함수를 사용하여 CSS에서 투명 색상 만들기
rgba() 함수는 red-green-blue-alpha 모델을 사용하여 색상을 정의합니다. rbga() 함수의 rbg는 빨간색, 녹색 및 파란색의 색상 값을 의미하고 a는 색상의 불투명도를 나타냅니다. 각 매개변수(빨간색, 파란색, 녹색)는 0-255 사이의 색상 강도를 정의합니다. 반면 a의 값은 0-1 사이여야 합니다. 예를 들어 rgba(255, 100, 100, 0.4). `` 값이 작을수록 색상이 더 투명해집니다. opacity 속성과 달리 자식 요소는 투명해지지 않습니다. a 값이 0.5이면 색상이 반투명하거나 50% 투명합니다.
예를 들어, 제목이 h1이고 클래스가 transparent인 HTML 문서를 작성하십시오. 제목 태그 사이에 Hello World라는 텍스트를 작성합니다. rgba() 함수를 사용하여 클래스에 배경색을 지정합니다. rgba 값을 rgba(255, 100, 100, 0.4)로 입력합니다. 의 값을 감소시켜 더 투명하게 만들고 의 값을 증가시켜 더 불투명하게 만듭니다.
아래 예는 a 값을 0.4로 입력하면 제목의 배경색이 투명해지는 것을 보여줍니다. 그러나 heading 하위 요소는 투명해지지 않습니다.
예제 코드:
<h1 class="transparent"> Hello world </h1>
.transparent{
background-color: rgba(255, 100, 100, 0.4);
}
16진수 값을 사용하여 CSS에서 투명 색상 만들기
HTML 요소에 특정 색상을 부여하기 위해 6자 뒤에 #이 오는 16진수 값을 사용하는 경우가 많습니다. 예: #A5BE32. 16진수 값 끝에 두 개의 숫자 값을 추가하고 8자리 16진수 값으로 만들어 색상을 투명하게 만들 수 있습니다. 예: #A5BE3280. 여기서 #A5BE32는 색상을 나타내며 끝의 80은 색상의 불투명도를 나타냅니다. 50% 투명한 색상을 원하면 16진수 코드 끝에 80 값을 사용할 수 있습니다. RGB 색상에서 스케일이 0-255이므로 절반은 255/2 = 128이 되고 16진수로 변환하면 80이 됩니다. opacity 속성과 달리 자식 요소는 투명해지지 않습니다.
예를 들어, 제목 h1과 클래스 transparent(예: <h1 class="transparent">Hello world </h1>)가 있는 HTML 문서를 만듭니다. 클래스에 #A5BE32 배경색을 지정합니다. 16진수 코드 끝에 80을 추가하여 50% 투명하게 만듭니다. 16진수 코드가 #A5BE3280이 되도록 합니다.
아래 예는 16진수 코드 끝에 80을 추가하면 제목의 배경색이 50% 투명해지는 것을 보여줍니다.
예제 코드:
<h1 class="transparent"> Hello world </h1>
.transparent{
background-color: #A5BE3280
}