【CSS3】-カラーRGBAとグラデーションカラー_html/css

【CSS3】-カラーRGBAとグラデーションカラー_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:45:53

オリジナル

1741 人が閲覧しました

色の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>

ログイン後にコピー

効果:

ログイン後にコピー