• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Colors</title>
7
    <style>
8
        body {
9
            background-image: url("/examples/images/img_check_pattern.png");
10
            color: white;
11
            font-weight: bold;
12
        }
13
        #para_01 {background-color: rgb(255,0,0); opacity:0}
14
        #para_02 {background-color: rgb(255,0,0); opacity:0.2}
15
        #para_03 {background-color: rgb(255,0,0); opacity:0.4}
16
        #para_04 {background-color: rgb(255,0,0); opacity:0.6}
17
        #para_05 {background-color: rgb(255,0,0); opacity:0.8}
18
        #para_06 {background-color: rgb(255,0,0); opacity:1}
19
​
20
        #para_07 {background-color: rgba(255,0,0,0);}
21
        #para_08 {background-color: rgba(255,0,0,0.2);}
22
        #para_09 {background-color: rgba(255,0,0,0.4);}
23
        #para_10 {background-color: rgba(255,0,0,0.6);}
24
        #para_11 {background-color: rgba(255,0,0,0.8);}
25
        #para_12 {background-color: rgba(255,0,0,1);}
26
    </style>
27
</head>
28
​
29
<body>
30
​
31
    <h1>opacity 속성값을 조정</h1>
32
    <p id="para_01">RGB 색상값으로 표현된 빨간색 : opacity 속성값 0.0</p>
33
    <p id="para_02">RGB 색상값으로 표현된 빨간색 : opacity 속성값 0.2</p>
34
    <p id="para_03">RGB 색상값으로 표현된 빨간색 : opacity 속성값 0.4</p>
35
    <p id="para_04">RGB 색상값으로 표현된 빨간색 : opacity 속성값 0.6</p>
36
    <p id="para_05">RGB 색상값으로 표현된 빨간색 : opacity 속성값 0.8</p>
37
    <p id="para_06">RGB 색상값으로 표현된 빨간색 : opacity 속성값 1.0</p>
38
​
39
    <h1>알파 값을 조정</h1>
40
    <p id="para_07">RGBA 색상값으로 표현된 빨간색 : 알파 값 0.0</p>
41
    <p id="para_08">RGBA 색상값으로 표현된 빨간색 : 알파 값 0.2</p>
42
    <p id="para_09">RGBA 색상값으로 표현된 빨간색 : 알파 값 0.4</p>
43
    <p id="para_10">RGBA 색상값으로 표현된 빨간색 : 알파 값 0.6</p>
44
    <p id="para_11">RGBA 색상값으로 표현된 빨간색 : 알파 값 0.8</p>
45
    <p id="para_12">RGBA 색상값으로 표현된 빨간색 : 알파 값 1.0</p>
46
​
47
</body>
48
​
49
</html>