ホームページ > 記事 > ウェブフロントエンド > 【CSS3】-カラーRGBAとグラデーションカラー_html/css_WEB-ITnose
【CSS3】-カラーRGBAとグラデーションカラー_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:531703ブラウズ
色のRGBA
RGBとは、赤(R)、緑(G)、青(B)を変化させ重ね合わせて得られる様々な色の色の規格です。 RGBA は RGB に基づいており、アルファの透明度を制御するパラメーターを追加します。
構文:
color：rgba(R,G,B,A)
3 つのカラー パラメーター R、G、および B。正の整数値の値の範囲は: 0 ～ 255 です。
パーセンテージ値の値の範囲は: 0.0% - 100.0%です。範囲外の値は、最も近い値の制限に丸められます。すべてのブラウザがパーセンテージ値の使用をサポートしているわけではありません。
A は透明度パラメータであり、値は 0 から 1 の間であり、負の値にすることはできません。
コード例:
background-color:rgba(100,120,60,0.5);
グラデーションカラー
CSS3 グラデーションは線形グラデーション(linear)と放射状グラデーション(radial)に分かれています。レンダリング エンジンが異なると、グラデーションを実装するための構文が異なるため、ここでは線形グラデーションの W3C 標準構文に基づいてその使用法のみを分析します。残りについては関連情報を参照してください。 W3C 構文は、IE10 以降、Firefox19.0 以降、Chrome26.0 以降、Opera12.1 以降などのブラウザでサポートされています。
このセクションでは、線形グラデーションについて説明します:
パラメータ:
最初のパラメータ: グラデーションの方向を指定します、キーワード「angle」または」 English" を表す:
(画像をクリックすると拡大します)
最初のパラメータが省略された場合、デフォルトは "180deg" で、これは "tobottom" に相当します。
2 番目と 3 番目のパラメーター は、色の開始点と終了点を表します は、複数の色の値を持つことができます。
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
レンダリング:
例子
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>Gradient</title><style type="text/css">p { width: 400px; height: 150px; line-height: 150px; text-align:center; color: #000; font-size:24px; background-image:linear-gradient(to top left,red,green,blue,yellow,black,white);} </style></head> <body> <p>右下角向左上角的线性渐变背景</p></body></html> 効果: