CSS 투명도(불투명도)

opacity CSS 속성은 요소의 투명도를 지정합니다. opacity 속성은 요소의 투명도를 지정합니다. 다시 말해, opacity 속성은 요소 뒤의 배경이 덮히는 정도를 지정합니다.

브라우저 간 투명도

지금, 투명도(opacity)는 CSS3규격의 일부이지만 오랫동안 존재해왔습니다. 그러나, 오래된 브라우저는 불투명도나 투명도를 지정하는 방법이 다릅니다.

Firefox, Safari, Chrome, Opera 및 IE9의 CSS 불투명도

이것은 모든 현재 브라우저에서 CSS 불투명도의 가장 최신 문법입니다.

p　{
　　　　opacity: 0.7;
}

위의 스타일 룰은 단락 요소를70% 불투명(또는30% 투명)입니다.

opacity 속성의 값은 0.0에서1. 0. opacity 값을 설정하면1;은 요소가 완전히 불투명(즉 0% 투명)합니다. opacity: 0;은 요소가 완전히 투명(즉 0% 투명)합니다.100% 투명)입니다.

Internet Explorer 8그리고 더 낮은 버전에서의 CSS 투명도 구현 방법

Internet Explorer 8그리고 더 오래된 버전은 마이크로소프트의 속성인 'alpha 필터'를 사용하여 요소의 투명도를 지정할 수 있습니다.

p　{
　　　　filter: alpha(opacity=50);
　　　　zoom:　1;　　/*　IE 위쪽 수정7　*/
}

모든 브라우저와 호환되는 CSS 투명도를 얻을 수 있습니다

위 두 단계를 결합하여모든 브라우저의투명성 코드。

p　{
　　　　opacity: 0.5;　　/*　현재 브라우저용 투명도　*/
　　　　filter: alpha(opacity=50);　　/*　IE 투명도8　그리고 더 낮은　*/
　　　　zoom:　1;　　/*　IE 위쪽 수정7　*/
}

CSS 이미지 투명도

CSS 투명도를 사용하여 투명 이미지를 만들 수도 있습니다.

아래 그림에는 동일한 원본 이미지가 세 가지로 있습니다. 그들 간의 유일한 차이점은 투명도입니다.

마우스 오버 시 이미지 투명도 변경

다음 예제는 CSS 이미지 투명도의 일반적인 사용법을 보여줍니다. 사용자가 이미지 위에 마우스 포인터를 이동할 때, 이미지의 투명도가 변경됩니다.

—이미지 위에 마우스 포인터를 이동하여 효과를 확인하세요.

투명 브라우저 내의 글자

요소에 불투명도를 사용할 때, 요소의 배경뿐만 아니라 모든 자식 요소도 투명으로 됩니다. 불투명도 값이 높아지면, 투명 요소 내부의 텍스트를 읽기 어려워집니다.

이런 상황을 방지하기 위해, 투명한 PNG 이미지를 사용하거나, 텍스트 블록을 투명 브라우저 밖에 두고, 부정적인 값을 사용할 수 있습니다.마argins또는CSS 정위치그를 내부로 시각적으로 밀어넣습니다.

div　{
　　　　float: 왼쪽;
　　　　opacity: 0.7;
　　　　border:　1px solid #949781;
}
p　{
　　　　float: 왼쪽;
　　　　position: 상대적;
　　　　margin-left:　-400px;
}

RGBA를 사용하는 CSS 투명도

RGB를 제외하고, CSS3RGBA를 통해 alpha 투명도를 색상 값의 일부로 포함하여 새로운 방법을 도입했습니다. RGBA는 Red Blue Green Alpha를 의미합니다.

RGBA 선언은 색상 투명도를 설정하는 매우 간단한 방법입니다.

div　{
　　　　background:　rgba(200,　54,　54,　0.5);
}
p　{
　　　　color:　rgba(200,　54,　54,　0.25);
}

의 세 번째 숫자는 RGB 값의 색상을 나타냅니다. 즉, 빨강(0-255），초록(0-255），파랑(0-255），네 번째 숫자는 0에서1사이의 alpha 투명도 값(0은 색상을 완전히 투명하게 만들고, 값1그를 완전히 불투명하게 만듭니다).

RGBA 투명도에 대해 주의해야 할 중요한 특징은-단일 색상의 투명도를 지정할 수 있는 능력.

— 또는 텍스트 색상을 무시하고 배경의 투명도만 변경.

RGBA를 사용하여 단일 색상을 쉽게 지정할 수 있음을 알 수 있습니다. 그러나, RGBA 색을 지원하지 않는 브라우저에 대해 대체 색을 정의하는 것을 항상 권장합니다.

RGBA 선언 대체 색

모든 브라우저에서 RGBA 색을 지원하지 않습니다. 그러나, 지원하지 않는 브라우저에 대해 다른 선택을 제공할 수 있습니다. 예를 들어, 단색 또는 투명한 PNG 이미지.

p　{
　　　　/*　web 브라우저에서 지원하지 않는 경우의 대체方案39;t　support　RGBA　*/
　　　　background:　rgb(0,　0,　0);
　　　　/*　RGBa　with　0.5　opacity　*/
　　　　background:　rgba(0,　0,　0,　0.5);
}