투명한 이미지나 컬러를 사용하려면 이미지를 따로 만들어서 사용해야만 했지만 이제는 그럴 필요가 없습니다. CSS3만으로도 투명한 효과를 쉽게 나타낼 수 있습니다.
5개의 대표 브라우저 모두가 CSS3의 불투명도를 지원합니다. 불투명도 속성은 이미 오래전에 지원하는 기술이기 때문에 브라우저의 특성을 입력할 필요가 없습니다. Internet Explorer같은 경우 오래된 버전은 불투명도 속성을 지원하지 않으며 오직 HTML5와 CSS3를 지원하는 최신 버전만 사용이 가능합니다.
우선 image 클래스와 color-box 클래스의 엘리먼트가 있다고 가정합시다. color-box의 엘리먼트가 image 엘리먼트보다 위에 있습니다. opacity라는 속성을 이용하면 해당 엘리먼트의 불투명도를 조절할 수 있습니다.
16진수 컬러 코드대신 RGB와 Alpha를 입력해서 색을 처리할 수 있는 rgba를 사용하면 됩니다. rgba를 입력한 후 괄호 안에는 빨간색 조명 세기, 초록색 조명 세기, 파란색 조명 세기, Alpha 값을 입력합니다. 즉, rgba(빨간색 조명 세기, 초록색 조명 세기, 파란색 조명 세기, Alpha)를 입력하면 그에 대한 값에 따라 색을 처리합니다. 여기서 Alpha는 불투명도를 뜻합니다. RGB 컬러가 아닌 HSL 컬러를 사용해도 되는데 이때 rgba가 아닌 hsla를 입력하여 사용합니다. hsla를 입력한 후 괄호 안에는 색상, 채도, 밝기, Alpha를 입력하면 색이 적용됩니다. rgba나 hsla는 선과 배경이 함께 적용되는 opacity와 달리 선과 배경의 불투명도를 다르게 설정할 수 있어 이미지로 이미지로 이루어진 배경이 아니라면 유용하게 쓰일 수 있습니다. 예를 들어 노란색 배경에 오렌지색 선이 있는데 opacity란 속성을 적용하면 선과 배경 모두 같은 값의 불투명도가 적용되지만 hsla나 rgba를 사용하는 경우에는 불투명도를 선이나 배경마다 다르게 설정할 수 있습니다.
5개의 대표 브라우저 모두가 CSS3의 불투명도를 지원합니다. 불투명도 속성은 이미 오래전에 지원하는 기술이기 때문에 브라우저의 특성을 입력할 필요가 없습니다. Internet Explorer같은 경우 오래된 버전은 불투명도 속성을 지원하지 않으며 오직 HTML5와 CSS3를 지원하는 최신 버전만 사용이 가능합니다.
우선 image 클래스와 color-box 클래스의 엘리먼트가 있다고 가정합시다. color-box의 엘리먼트가 image 엘리먼트보다 위에 있습니다. opacity라는 속성을 이용하면 해당 엘리먼트의 불투명도를 조절할 수 있습니다.
.color-box {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
box-sizing: border-box;
width: 600px;
height: 338px;
background-color: #696969;
border: 1px solid #333;
opacity: 0.5;
}right: 0;
bottom: 0;
z-index: 2;
box-sizing: border-box;
width: 600px;
height: 338px;
background-color: #696969;
border: 1px solid #333;
opacity: 0.5;
16진수 컬러 코드대신 RGB와 Alpha를 입력해서 색을 처리할 수 있는 rgba를 사용하면 됩니다. rgba를 입력한 후 괄호 안에는 빨간색 조명 세기, 초록색 조명 세기, 파란색 조명 세기, Alpha 값을 입력합니다. 즉, rgba(빨간색 조명 세기, 초록색 조명 세기, 파란색 조명 세기, Alpha)를 입력하면 그에 대한 값에 따라 색을 처리합니다. 여기서 Alpha는 불투명도를 뜻합니다. RGB 컬러가 아닌 HSL 컬러를 사용해도 되는데 이때 rgba가 아닌 hsla를 입력하여 사용합니다. hsla를 입력한 후 괄호 안에는 색상, 채도, 밝기, Alpha를 입력하면 색이 적용됩니다. rgba나 hsla는 선과 배경이 함께 적용되는 opacity와 달리 선과 배경의 불투명도를 다르게 설정할 수 있어 이미지로 이미지로 이루어진 배경이 아니라면 유용하게 쓰일 수 있습니다. 예를 들어 노란색 배경에 오렌지색 선이 있는데 opacity란 속성을 적용하면 선과 배경 모두 같은 값의 불투명도가 적용되지만 hsla나 rgba를 사용하는 경우에는 불투명도를 선이나 배경마다 다르게 설정할 수 있습니다.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
코멘트 0
