css3でサポートされている色の表現方法は何ですか？-フロントエンドQ&A-php.cn

css3でサポートされている色の表現方法は何ですか？

青灯夜游

リリース： 2022-03-17 19:01:22

オリジナル

3035 人が閲覧しました

css3 の色表現方法は次のとおりです: 1. 色の英語名を使用して表現します (たとえば、「red」は赤を意味します)。 2. 16 進数表記を使用します (たとえば、「#ffff00」)。 3. rgb を使用します。 () 関数で表す; 4. hsl() 関数で表す; 5. rgba() 関数で表す; 6. hsla() 関数で表す

css3でサポートされている色の表現方法は何ですか？

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

色と光の三原色原理

色と光の三原色は赤(レッド)です,グリーン(緑),ブルー(青) カラフルで鮮やかなカラーを形成できる3種類。

本当に覚えていない場合は、ここで左折して百度百科にアクセスしてください

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>

ログイン後にコピー

Web ページの表示

css3でサポートされている色の表現方法は何ですか？