CSS 불투명도 속성
예시
<div> 요소의 불투명도 수준을 설정합니다.
div
{
opacity: 0.5;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
opacity속성은 요소의 불투명도 수준을 설정합니다 .
불투명도 수준은 투명도 수준을 설명합니다. 여기서 1은 전혀 투명하지 않고 0.5는 50% 투명, 0은 완전히 투명합니다.
Note: When using the opacity property to add transparency to
the background of an element, all of its child elements become transparent as
well. This can make the text inside a fully transparent element hard to read. If
you do not want to apply opacity to child elements, use RGBA color values
instead (See "More Examples" below).
| Default value: | 1 |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.opacity="0.5" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Note: IE8 and earlier versions supports an alternative, the filter property. Like: filter:Alpha(opacity=50).
CSS Syntax
opacity: number|initial|inherit;
Property Values
| Value | Description | Play it |
|---|---|---|
| number | Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque) | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
The opacity property adds transparency to the background of an element, and to all of its child elements as well. This makes the text inside a transparent element hard to read:
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
Example
To not apply opacity to child elements (like in the example above) use RGBA color values instead. The following example sets the opacity for the background color, but not for the text:
div.first {
background: rgba(76, 175, 80, 0.1);
}
div.second {
background: rgba(76, 175, 80, 0.3);
}
div.third {
background: rgba(76, 175, 80,
0.6);
}
Tip: Learn more about RGBA Colors in CSS RGBA Colors.
Example
How to use JavaScript to change the opacity for an element:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
}
Related Pages
CSS Tutorial: CSS Opacity / Transparency
CSS Tutorial: CSS RGBA Colors
HTML DOM Reference: opacity property