ホームページ >ウェブフロントエンド >フロントエンドQ&A >css3でサポートされている色の表現方法は何ですか？
css3でサポートされている色の表現方法は何ですか？
- 青灯夜游オリジナル
- 2022-03-17 19:01:223123ブラウズ
css3 の色表現方法は次のとおりです: 1. 色の英語名を使用して表現します (たとえば、「red」は赤を意味します)。 2. 16 進数表記を使用します (たとえば、「#ffff00」)。 3. rgb を使用します。 () 関数で表す; 4. hsl() 関数で表す; 5. rgba() 関数で表す; 6. hsla() 関数で表す
このチュートリアルの動作環境: 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 ページの表示
css ビデオ チュートリアル 、Web フロントエンド )
以上がcss3でサポートされている色の表現方法は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。