CSS3에서 지원하는 색상 표현 방법은 무엇입니까?
- 青灯夜游원래의
- 2022-03-17 19:01:223093검색
CSS3 색상 표현 방법은 다음과 같습니다. 1. 색상의 영어 이름으로 표현합니다. 예를 들어 "red"는 빨간색을 의미합니다. 2. 16진수 시스템으로 표현합니다. 예: "#ffff00" 3. rgb()를 사용합니다. 4. hsl() 함수를 사용하여 표현합니다. 5. rgba() 함수를 사용하여 표현합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
색과 빛의 삼원색의 원리
색과 빛의 삼원색은 빨간색(빨간색), 녹색(녹색), 파란색(파란색)입니다. 다양하고 화려한 색상을 형성합니다.
정말 기억나지 않는다면 여기에서 좌회전하여 바이두 백과사전
CSS3에서 지원하는 색상 표현 방식
- 은 색상의 영문명으로 표현됩니다. 영문명은 색상을 표현하지만 그 표현이 매우 제한되어 기억하고 문의하기가 어렵습니다.
- 은 hex 색상으로 표현됩니다. 색과 빛의 삼원색의 원리는 표에서 찾아볼 수 있다.
- 은 rgb(r, g, b)로 표시됩니다. 빛의 삼원색, 즉 빨간색 + 녹색 + 파란색의 원리.
- 는 hsl(색상, 채도, 밝기)으로 표현됩니다. 색조 + 채도 + 밝기.
- 은 rgba(r, g, b, a)로 표시됩니다. 빛의 삼원색인 빨강, 초록, 파랑 + 투명도의 원리. a ∈ [0, 1], 0은 완전한 투명성을 나타냅니다.
- 는 hsla(색조, 채도, 밝기, 알파)로 표시됩니다. 색상, 채도, 밝기 + 투명도. alpha ∈ [0, 1], 0은 완전한 투명도를 나타냅니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" ;charset="utf-8">
<title>CSS颜色表示</title>
<style type="text/css">
div>div{
width: 400px;
height: 40px;
}
</style>
</head>
<body>
<script type="text/javascript">
for (var i = 0; i < 300; i++) {
document.write("CSS颜色表示");
}
</script>
<div style="position:absolute;top:0px">
<div style="background-color:gray;">
background-color:gray
</div>
<div style="background-color:#ff4314;">
background-color:#888
</div>
<div style="background-color:#ffff00;">
background-color:#ffff00
</div>
<div style="background-color:rgb(0, 255, 255);">
background-color:rgb(0, 255, 255)
</div>
<div style="background-color:hsl(120, 100%, 50%);">
background-color:hsl(120, 100%, 50%)
</div>
<div style="background-color:rgba(0, 255, 255, 0.5);">
background-color:rgba(0, 255, 255, 0.5)
</div>
<div style="background-color:hsla(120, 100%, 50%, 0.5);">
background-color:hsla(120, 100%, 50%, 0.5)
</div>
</div>
</body>
</html>웹페이지 표시
설명
끝에 텍스트를 추가하는 이유는 투명성을 확인하기 위함입니다.
(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)
위 내용은 CSS3에서 지원하는 색상 표현 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.