CSS 불투명도 / 투명도
- 이전 페이지 CSS伪요소
- 다음 페이지 CSS 네비게이션 패널
opacity 속성은 요소의 불투명도/투명도를 지정합니다.
투명한 이미지
opacity 속성의 값 범위는 0.0-1.0입니다. 값이 낮을수록 투명합니다:
opacity 0.2
opacity 0.5
opacity 1
예제
img {
opacity: 0.5;
}
투명한 호버 효과와 함께 사용됩니다
opacity 속성은 일반적으로 :hover 선택자와 함께 사용하여 마우스를 올릴 때 불투명도를 변경할 수 있습니다:
예제
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
예제 설명
첫 번째 CSS 블록은 예제 1의 코드와 유사합니다. 또한, 사용자가 그림 중 하나에 마우스를 올릴 때의 효과를 추가했습니다. 이 경우, 사용자가 그림에 마우스를 올렸을 때, 그림이 불투명하도록 원합니다. 이 CSS는 opacity:1;.
마우스 포인터가 이미지에서 벗어나면 이미지가 다시 투명해집니다.
반대 호버 효과 예제:
예제
img:hover {
opacity: 0.5;
}
투명 상자
사용 opacity 요소의 배경에 투명도를 추가할 때, 그 모든 자식 요소는 같은 투명도를 상속합니다. 이로 인해 완전 투명한 요소 내의 텍스트가 읽기 어려울 수 있습니다:
예제
div {
opacity: 0.3;
}
RGBA 투명도 사용
위의 예제와 같이 자식 요소에 투명도를 적용하지 않고 싶다면 RGBA 색상 값을 사용하십시오. 아래의 예제는 배경색을 설정하는 것이 아니라 텍스트의 투명도를 설정합니다:
우리의 CSS 색상 이 장에서는 RGB를 색상 값으로 사용할 수 있음을 배웠습니다. RGB 색상 값 외에도 RGB 색상 값을 alpha 채널(RGBA)과 함께 사용할 수 있습니다 - 이 채널은 색상의 투명도를 정의합니다.
RGBA 색상 값은 rgba(red, green, blue, alpha) alpha 매개변수는 0.0(완전 투명)과 1.0(완전 불투명) 사이의 숫자입니다.
ヒント:우리의 CSS 색상 이 장에서는 RGBA 색상에 대해 더 많이 배웠습니다.
예제
div {
background: rgba(76, 175, 80, 0.3) /* 투명도 30%의緑색 배경 */
}
투명 상자 안의 텍스트
이 투명한 상자 안에 있는 텍스트입니다.
예제
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>이것은 투명한 상자에 있는 텍스트입니다.</p>
</div>
</div>
</body>
</html>
예제 설명
먼저, 배경 이미지와 경계가 있는 <div> 요소를 생성합니다(class="background").
그런 다음, 우리는 첫 번째 <div> 내에서 또 다른 <div>를 생성합니다(class="transbox").
<div class="transbox">에 배경색과 경계가 있으며 - 이 div는 투명합니다.
투명한 <div> 내에서, 우리는 <p> 요소 내에 일부 텍스트를 추가했습니다.
- 이전 페이지 CSS伪요소
- 다음 페이지 CSS 네비게이션 패널
