코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS3 Colors</title> <style> body { background-image: url("/examples/images/img_check_pattern.png"); color: white; font-weight: bold; } #para_01 {background-color: rgb(255,0,0); opacity:0} #para_02 {background-color: rgb(255,0,0); opacity:0.2} #para_03 {background-color: rgb(255,0,0); opacity:0.4} #para_04 {background-color: rgb(255,0,0); opacity:0.6} #para_05 {background-color: rgb(255,0,0); opacity:0.8} #para_06 {background-color: rgb(255,0,0); opacity:1} #para_07 {background-color: rgba(255,0,0,0);} #para_08 {background-color: rgba(255,0,0,0.2);} #para_09 {background-color: rgba(255,0,0,0.4);} #para_10 {background-color: rgba(255,0,0,0.6);} #para_11 {background-color: rgba(255,0,0,0.8);} #para_12 {background-color: rgba(255,0,0,1);} </style> </head> <body> <h1>opacity 속성값을 조정</h1> <p id="para_01">RGB 색상값으로 표현된 빨간색 : opacity 속성값 0.0</p> <p id="para_02">RGB 색상값으로 표현된 빨간색 : opacity 속성값 0.2</p> <p id="para_03">RGB 색상값으로 표현된 빨간색 : opacity 속성값 0.4</p> <p id="para_04">RGB 색상값으로 표현된 빨간색 : opacity 속성값 0.6</p> <p id="para_05">RGB 색상값으로 표현된 빨간색 : opacity 속성값 0.8</p> <p id="para_06">RGB 색상값으로 표현된 빨간색 : opacity 속성값 1.0</p> <h1>알파 값을 조정</h1> <p id="para_07">RGBA 색상값으로 표현된 빨간색 : 알파 값 0.0</p> <p id="para_08">RGBA 색상값으로 표현된 빨간색 : 알파 값 0.2</p> <p id="para_09">RGBA 색상값으로 표현된 빨간색 : 알파 값 0.4</p> <p id="para_10">RGBA 색상값으로 표현된 빨간색 : 알파 값 0.6</p> <p id="para_11">RGBA 색상값으로 표현된 빨간색 : 알파 값 0.8</p> <p id="para_12">RGBA 색상값으로 표현된 빨간색 : 알파 값 1.0</p> </body> </html>