CSS3에서 지원하는 색상 표현 방법은 무엇입니까?-프런트엔드 Q&A-php.cn

CSS3에서 지원하는 색상 표현 방법은 무엇입니까?

青灯夜游

풀어 주다： 2022-03-17 19:01:22

원래의

3097명이 탐색했습니다.

CSS3 색상 표현 방법은 다음과 같습니다. 1. 색상의 영어 이름으로 표현합니다. 예를 들어 "red"는 빨간색을 의미합니다. 2. 16진수 시스템으로 표현합니다. 예: "#ffff00" 3. rgb()를 사용합니다. 4. hsl() 함수를 사용하여 표현합니다. 5. rgba() 함수를 사용하여 표현합니다.

CSS3에서 지원하는 색상 표현 방법은 무엇입니까?

이 튜토리얼의 운영 환경: 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>

로그인 후 복사

웹페이지 표시

CSS3에서 지원하는 색상 표현 방법은 무엇입니까?