背景グラデーション

以前、我々はこの段階的な変化を達成したい、それがグラデーションを作成して、背景要素に背景画像のプロパティ勾配のグラフィックを使用するPhotoshopやFireworksのグラフィックがかかる場合があります。

さて、CSSサポート勾配の背景、画像はWebブラウザ用に作成され、瞬時に理解することができます。したがって、勾配も作成する従来の背景画像プロパティを使用して

リニアグラジエント

背景画像：リニアグラジエント（角度、色）。

線形勾配は勾配の最も基本的なタイプです。直線で別の色に一つの色からこの徐々に移行。

マイクロチャンネルの購読数：Rabbit_svip

これは、線の方向の角度によって指定された、またはキーワードを追加され、続いて上部に、下、右、左下に、例えば特定のキーまたはキーに残さ。

図の例として、
CSSコード：

body {
    background-image: linear-gradient(to right , #7A88FF, #7AFFAF);
}

過以下の上に紫から緑の要素への勾配であれば、下にキーワードを使用します。
CSSコード：

html, body {
    width: 100%;
    height: 100%; } body { background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF); }

また、あなたは、グラデーションの角度を指定し、右下のキーワードにこれを使用することができます。要素の開始の左上隅、右下隅にエンド要素の勾配。
CSSコード：

html, body {
    width: 100%;
    height: 100%; } body { background-image: linear-gradient(to bottom right, #7A88FF, #7AFFAF); }

色遷移がCSS内の色値のいずれかで使用することができ、参照は、[CSS透明有色

グラデーションの方向は、キーワードの使用のみに限定されるものではなく、あなたはまた、角度の値を使用してグラデーションの方向を指定することができます。

角度値を書き込む：
プラス指定された遷移方向の端た、360 0との間の番号の後度。

例えば、要素の上端は0deg、そのように上端の始端の下端から移行。

言い換えれば、
background-image: linear-gradient(to top, #7A88FF, #7AFFAF);
それは同等です：
background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);

従って、時計回りの回転、及び角度の値は、右側（右に同じ）90deg元素を表し、原稿180°は（下に同じ）ベース要素を表し、270deg要素は、左（左に同じ）を表します。

角度値を使用する場合は、ブラウザが要素の中心を通る仮想線を描画します。この角度は、ラインの角度ですが、また、それが終了する場所を過剰に指定されたことを示しています。

CSSコード：

html, body {
    width: 100%;
    height: 100%; } body{ background-image: linear-gradient(45deg, #7A88FF, #7AFFAF); }

ブラウザは、素子の中心を通る仮想線を描き、45°ポイントスケールは、従って、左下隅の要素からの遷移は、右上の端に開始します。

ここでは非常に楽しいウェブサイトをお勧めします。
https://codepen.io/thebabydino/full/qgoBL

カラーコード

必要に応じて、できるだけ多くの色を追加することができます。追加の余分な色は、色（カラーストップ）と呼ばれています。PSは、簡単に理解するためにカラーコードを理解します。

色を追加した後、背景色が最終日まで、第2の色の最初からの遷移、および第3の色に第二の色から変化、色のグラデーションであろう。

色を追加します：
CSSコード：

html, body {
    width: 100%;
    height: 100%; } body{ background-image: linear-gradient(to right, black, white, black); }

ブラウザは、各色の分布を平均化します。

最後に、あなたはまた、明確に各カラーパッチの位置を示し、後ろに色の値を追加することができます。

フィギュアのCSSコード：

html, body {
    width: 100%;
    height: 100%; } body { background-image: linear-gradient(to right, #E94E65, #15A892 20%, #A89215 80%, #1574A8); }

背景色勾配がはるか左、左から右に開始ローズあり、シアン、黄色、そして最後に青に80％の位置、要素の幅の20％となります。

カラー目印は、パーセンテージを使用する必要はありませんあなたはまた、ピクセルまたは全角の値を使用することができます。意志は要素の幅または高さが変化するようにしかし、割合は、最も柔軟性があります。

ブラウザが0％の位置における第一の色を開始すると、100％の位置における最後の色の終わりを嘉定するので、場所を指定せずに、最初と最後のカラー色をマルチカラーグラデーションを使用する場合。
最初の色または指定された開始位置の最終位置の色をしたい場合を除き、のみ特異的に標的化する必要があります。

以下のような：
CSSコード：

html, body {
    width: 100%;
    height: 100%; } body { background-image: linear-gradient(to right, #E94E65 20%, #15A892 40%, #A89215 60%, #1574A8 80%); }

第一の色値（＃1 E94E65）は、位置値（20％）を有します。したがって、前部横断要素の幅の背景色20％が純粋なピンク色です。これは、20％の位置から開始するようにピンクからブルーになっています。完全にピンクの終了位置の最大40％。

此外，因为元素可以有多个背景图，所以也能有多个渐变背景。
CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: linear-gradient(to bottom, cyan, transparent), linear-gradient(225deg, magenta, transparent), linear-gradient(45deg, yellow, transparent); }

在【CSS】同时使用多个背景图这个笔记的最后有记到，使用多个背景图时，最先用到的背景图会在最上层。

IE的支持程度

IE9及之前的版本都不支持渐变。如果一定要使用渐变，要为IE9及之前的版本提供后备颜色。

CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-color: #FC0; background-image: linear-gradient(to bottom, #900, #FC0, #900); }

IE9会应用指定的背景色，因为不支持线性渐变，会跳过第二个声明。其他浏览器会应用背景色，还会创建渐变，渐变会覆盖背景色。

如果使用的是RGBA颜色（RGBA颜色可见【CSS】着色与透明笔记），设置了一定程度的透明度，且不想透过渐变看到背景色。此时可以使用简写的 background 属性，覆盖 background-color 属性（这是简写的background属性的一个比较怪异的行为，可见【CSS】背景基础知识简写部分）。所以可以这样写。

CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-color: #FC0; background: linear-gradient(to bottom, rgba(153, 0, 0, .5), #FC0, rgba(153, 0, 0, .5)); }

平铺的线性渐变

background-image: repeating-linear-gradient();

平铺的线性渐变其实就是在普通的渐变基础上多了一个重复的效果。
平铺的线性渐变定位色标用的是像素值或者em值，这里百分比不是很好用，至少我理解起来比较费劲。

先看效果图

例1 CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 30px, #66CC99 40px); }

上面例1中，定义了渐变的角度，浏览器从左下角开始绘制渐变，前20像素是绿色，此后直至30像素的位置过渡到紫色，然后直至40像素的位置再过渡到绿色。绘制完这个渐变后，浏览器会像平铺图像那样把这个渐变铺满整个背景。

例2 CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 20px, #6666CC 30px, #66CC99 30px, #66CC99 40px); }

注意例2中对色标的定位。这样设置色标的位置，可以控制不同颜色在过渡中的强度。使得各个颜色过渡之间的边界变得清晰，形成条纹效果。

径向渐变

background-image: radial-gradient();

径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。

CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: radial-gradient(#99CCCC, #7171B7); }

上述代码会在元素的显示范围内创建一个椭圆形，把渐变的中心点（绿色）放在元素的中心上。

我们还可以在颜色值前面加上 circle 关键字，创建圆形的渐变。

CSS代码：

html, body {
   width: 100%;
   height: 100%; } body { background-image: radial-gradient(circle,#99CCCC, #7171B7); }

设置径向渐变的中心点

可以用关键字 at 后面加上 background-position 属性支持的定位关键字和数值，指定渐变中心的位置。
例如↓
CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: radial-gradient(circle at 20% 20%, #99CCCC, #7171B7); }

就把中心点设置在元素的左上方（20% 20%）。

closest-side：告诉浏览器从中心点向外扩展渐变，到离中心点最近的一边结束。
CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: radial-gradient(closest-side at 20% 20%, #99CCCC, #7171B7); }

closest-corner：以离渐变中心点最近的元素顶角计算渐变的范围。
CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: radial-gradient(closest-corner at 20% 20%, #99CCCC, #7171B7); }

farthest-side：以离渐变中心点最远的那一边计算圆的半径。
CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: radial-gradient(farthest-side at 20% 20%, #99CCCC, #7171B7); }

farthest-corner：以离渐变中心点最远的顶角计算圆的半径。
CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: radial-gradient(farthest-corner at 20% 20%, #99CCCC, #7171B7); }

色标

和线性渐变一样，径向渐变也可以使用多个色标。而且能设定各个色标的位置。

CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: radial-gradient(circle at 20% 40%,#99CCCC 20%, #7171B7 40%, #CCCC99 60%, #4F9C9C 80%); }

设置颜色时，可以使用任何有效的CSS颜色值。可参考【CSS】着色与透明

IE的兼容性

与线性渐变一样，IE9及之前的版本都不支持径向渐变，解决方法和线性渐变一样。

平铺的径向渐变

background-image: repeating-radial-gradient();

原理和前面讲到平铺的线性渐变一样。
例1 CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 40px, #CCCC99 60px, #4F9C9C 80px, #99CCCC 100px); }

例2 CSS代码：

html, body {
    width: 100%;
    height: 100%; } body { background-image: repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 20px, #7171B7 40px, #CCCC99 40px, #CCCC99 60px, #4F9C9C 60px, #4F9C9C 80px, #99CCCC 80px, #99CCCC 100px); }

注意：
为了让平铺的径向渐变看起来比较流畅，结束颜色应该与起始颜色相同。这样能让颜色自然地回归最初的颜色。

因为Web浏览器会把线性渐变和径向渐变当成背景图，所以可以使用控制背景图的其他属性，比如background-size、background-position等。

作者：Rabbit_svip
链接：https://www.jianshu.com/p/58b340a037ea
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

リニアグラジエント

カラーコード

IE的支持程度

平铺的线性渐变

径向渐变

设置径向渐变的中心点

色标

IE的兼容性

平铺的径向渐变

おすすめ