CSS 불투명도/투명도
opacity속성은 요소의 불투명도/투명도를 지정합니다 .
투명한 이미지
opacity속성은 0.0 - 1.0 사이의 값을 가질 수 있습니다 . 값이 낮을수록 더 투명해집니다.
불투명도 0.2
불투명도 0.5
불투명도 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;
}
투명 상자
When using the opacity property to add transparency to the background of an element, all of its child elements
inherit the same transparency. This can make the text inside a fully transparent element hard to read:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
div {
opacity: 0.3;
}
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
100% opacity
60% opacity
30% opacity
10% opacity
You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.
Example
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30%
opacity */
}
Text in Transparent Box
This is some text that is placed in the transparent box.
Example
<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>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Example explained
First, we create a <div> element (class="background") with a background image, and a border.
Then we create another <div> (class="transbox") inside the first <div>.
The <div class="transbox"> have a background color, and a border - the div is transparent.
Inside the transparent <div>, we add some text inside a <p> element.