CSS3背景で線形グラデーションを実現する方法

CSS3 では、背景属性と Linear-gradient() 関数を使用して背景の線形グラデーションを実装できます。構文は「background:linear-gradient(グラデーションの方向、色 1、色 2、...)」です。 );" 。

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

グラデーションとは、ある色から別の色に滑らかにフェードする画像で、指定した 2 つ以上の色の間で滑らかな変化を示すことができます。これらは、背景画像、ボタン、その他多くのものの微妙な色付けによく使用されます。

グラデーションは、グラデーション ラインの開始点と終了点を定義することによって、グラデーションの程度を指定します (グラデーション ラインは、グラデーションのタイプに応じて、幾何学的に直線、光線、または螺旋になります)。 、次にこの線に沿った点のグラデーションを指定します。色はスムーズにブレンドされて線の残りの部分を塗りつぶし、その後、各タイプのグラデーションを使用してグラデーション線の色を定義することにより、実際のグラデーションが生成されます。

そして、css3 linear-gradient() は、グラデーション ラインを直線として指定し、そのラインに沿っていくつかの色を配置することで、線形グラデーションを作成できます。無限のキャンバスを作成し、グラデーション ラインに垂直な線を使用して画像を描画することで、画像を構築できます。描画された線の色は、交差する 2 つのグラデーション ラインの色になります。これにより、指定した方向に各色から次の色へ滑らかなフェードが生成されます。

背景の線形グラデーションの構文:

background:linear-gradient(direction, color-stop1, color-stop2, ...);

##ValueDescription# #方向color-stop1、color-stop2、...

この関数 (特性) で受け入れられる最初のパラメータは、勾配の角度です。角度を表す値を受け入れることができます (利用可能な単位は deg、rad、## です) # grad または turn) または方向を示すキーワード (top、right、bottom、left) 、左上、右上、右下、または左下)。 2 番目のパラメーターは、一連のカラー ノード (終点の色) を受け入れます。

グラデーション コンテナ (グラデーション ボックス)

グラデーション イメージは、従来の背景イメージとは異なり、サイズ (サイズ制限) がありません。無制限です。次に、グラデーション画像の表示領域は、グラデーションコンテナのサイズによって決まります。

通常、DOM 要素の

background-image または background に linear-gradient を使用する場合、その (グラデーション) 表示領域は要素の border-box 領域 (要素の境界ボックス領域がわからない場合は、最初にボックス サイズに関するドキュメントを読むことをお勧めします)。実際、これは background-color、つまり URL を通じて背景画像が導入される表示領域でもあります。

ただし、CSS の

background-size でサイズを設定した場合 (200px * 200px など)、グラデーション コンテナー (グラデーション サイズ) は 背景になります。 -sizeサイズ200px * 200pxを設定します。 background-position が別の値に設定されていない場合、デフォルトで DOM 要素の左上隅に表示されます (つまり、background-position: left top)。

CSS では、グラデーションは

background の background-image です。つまり、背景画像に適した CSS プロパティはグラデーションにも適しています。

グラデーション ライン

グラデーション コンテナーでは、コンテナーの中心点と色の停止点を結ぶ線をグラデーションと呼びます。ライン。次のセクションでグラデーション角度に関する知識を紹介すると、グラデーションラインの理解が深まるので、次のセクションで詳しく紹介していきます。

グラデーション角度

明らかに、

linear-gradient を使用すると、グラデーションの角度によってグラデーションの方向が制御されます。 。次に、それについてさらに詳しく見てみましょう。

C ポイント グラデーション コンテナーの中心点。A は、C ポイントを通過し、# を通過する垂直線です。 ##Cグラデーション線間の角度を指定します。この角度をグラデーション角度と呼びます。 この角度は次の 2 つの方法で定義できます:

キーワードを使用します:
• to top

  、tobottom、 左へ、右へ、右上へ、左上へ、右下へおよび左下へ

#45deg
• 、

  1turn など、単位付きの数値を使用して角度を定義します。

  角度値の設定を省略した場合、デフォルトは
tobottom

(

180deg または .5turn に相当) ):

上記の例では、グラデーション角度が設定されておらず、白から赤のグラデーションカラーが上から下に向かってグラデーションになっています。以下に示すように、tobottom キーワード:

#次の 2 つの図の効果は、top と 0deg に使用するもので、それらの効果は同じです:

top キーワードの使用に関するもう 1 つの重要な点は、右上 (または他の隅のキーワード) など、グラデーション コンテナーのサイズに依存することです。 。

赤から青へのグラデーションが必要な場合、方向は要素の右上です。論理的には、青は要素の右上隅にあり、中央の紫色のグラデーションは左上隅から右下隅まで直線を形成する必要があります。以下の図に示すように:

したがって、右上とは、グラデーション ラインが右上隅を通過することを意味するわけではありません。つまり、グラデーション角度が 45 度を意味するわけではありません。 。

つまり、linear-gradient が top キーワード (右上、左上、右下、左下) を使用する場合、グラデーション ラインは最初に次の中心点を通過します。要素と頂点が直交し、中心点から垂線がなす角度が勾配角度になります。

グラデーション角度が動的に変化したときにグラデーション ラインがどのように移動するかを見てみましょう:

回顾一下渐变角度：

• 角度是渐变线与渐变容器中心点向上垂直线之间的夹角

• 0deg的意思就是to top

• 角度的默认值（也就是角度没有设置），它的值是to bottom，也和180deg相同

• 顶角关键词和渐变容器尺寸有关

渐变线长度a

之前我们看到渐变色停止分布沿着渐变线是需要解释的一件事情。你可能已经注意到了，在前面的示例中，停止的渐变颜色有时候在渐变容器以外的位置，这看起来有点奇怪，但如果你知道其中的逻辑之后，你就不会这么认为了。先看一下这个示例：

我们想要一个red至blue的渐变，渐变的角度是45deg，因为渐变容器的比例，渐变线不能通过右上角。但浏览器想要做什么（规范告诉它做什么），能使右上角是blue。

如果我们让渐变线的开始和结束都在渐变容器的边缘，那么blue将会覆盖渐变容器更大的区域，渐变不会有更多的扩散。

因此，为了做到这一点，渐变线有时不得不延长到渐变容器之外。其实很容器知道它的开始和结束位置。通过最近的角落画一条垂直于渐变线的线，与渐变线交叉的地方，就是渐变的开始和结束位置。

事实上，如果W是渐变容器的宽度，H是渐变容器的高度，A是渐变角度，那么渐变线的长度可以通过下面的公式计算：

abs(W * sin(A)) + abs(H * cos(A))

渐变色节点（Color stops）

渐变色的每一个可以这样定义：

<color> [<percentage> | <length>]?

因此不是强制性来指定颜色在渐变线的位置。例如：

如果没有显式指定颜色在渐变线上的位置，这将交给浏览器来确定颜色在渐变线上的位置。最简单的情况下只有两个颜色，颜色1将被放置在渐变线0%位置（渐变线开始位置），颜色2将被放置在100%位置处（渐变线的结束点）。如果有三个颜色，那么颜色1在渐变线的0%，颜色2在渐变线的50%，颜色3在渐变线的100%。在上面的这个示例中，有五个颜色，那么它们的位置分别在0%、25%、50%、75%和100%。它们将沿着渐变线平均分布渐变颜色。

当然，也可以在渐变线上显式自定义渐变颜色在渐变线的位置。每个位置可以用百分比表示（相对于渐变线计算），也可以是任何一个CSS长度单位。比如下面这个示例：

正如你所看到的，五个颜色的每个颜色都有自己的位置，而且是以像素为单位。这些位置从渐变线的开始位置处开始计算。

使用这些位置，你可以想出各种各样的漂亮效果。这样你可以做一个多色渐变：

上图中，有七个颜色，其中下一个颜色是在上一个颜色开始位置，这意味弟浏览器不需要填满两个颜色之余间的空间。

当然这样蛮好的也很有趣，如果你把颜色位置配合一起来使用会是什么样的情形。然后让浏览器自动分配你省略的颜色位置。

在上面的示例中，第二个颜色orange没有明确的指定其在渐变线上的位置，所以浏览器会自动计算出其位置。它可以根据第一个位置和下一个位置很容易计算出来。但如果有多个颜色没有指定位置，或者前一个或后一个都没有指定位置，那它就变得越来越复杂。

看下面这个示例：

在上图中，只有第三个颜色yellow指定了位置，在渐变线的30%处。为了很好的分发，它把第一个颜色red放置在渐变线的0%处，最后一个颜色black放置在渐变线的100%处。第二个颜色orange放置在渐变线0%至30%的中间位置，第四个颜色red放置在渐变线30%至100%中间位置。

上の図の最初の色と最後の色は、グラデーション ラインの指定された位置に配置され、残りの色は 2 つの間に均等に配分されます。

もちろん、0% から 100% の間であれば、制御は簡単です。しかし、この範囲を超えるケースもあります。たとえば、上の例では、最後の色はグラデーション ラインの 120% にあるため、他の色はこの位置に基づいて均等に分散されます (この例では、デフォルトの開始位置はまだ 0% です)。

ブラウザの動作をさらに向上させたい場合、グラデーション ライン上で色の位置を順番に指定できないのはなぜでしょうか?カラー ポイントの位置が予想された指示に従っているという事実は、非連続的な順序での操作を妨げるものではありません。ただし、後の値が前の値より小さい場合、ブラウザは自動的に対応する修正を行います。例:

最初の色の赤から始めましょう。これはグラデーション ラインの 30% に位置し、2 番目の色のオレンジは 10% にありますが、これはそれは間違っています。上で述べたように、色の停止点は増分です。このとき、ブラウザによって 2 番目の色の位置が修正され、前の色と同じ、グラデーション ラインの 30% の位置に配置されます。次に、3 番目の色の黄色はグラデーション ラインの 60% に配置されますが、その直後の 4 番目の色の青色は 40% であり、ブラウザもその位置を修正して前の色の位置と同じに設定します。

最後に、上の例では、最後の色の青が間違った位置にあるため、ブラウザはその位置を前の色と同じになるように修正します。この場合、それは隣接する色である黄色でもオレンジでもなく、最初の色の赤色まで遡ることになります。したがって、赤と青は両方ともグラデーション ラインの 30% に分布するため、黄色とオレンジ色は見えなくなります。

ツール

記事内のスクリーンショットはすべて、Codepen によって作成されたシンプルなツール から取得したものです。入力ボックスに任意のグラデーション値を入力すると、グラデーション効果だけでなく、グラデーション線の位置、グラデーション角度、グラデーション色も確認できます。

現時点では、このツールにはまださまざまな欠陥や制限があります (JavaScript のコメントを参照) ので、あまり大きな期待はしないでください。もちろん、これをベースにこのツールを改良して、すべての人を助けることもできます。グラデーションについての理解を深めることができます。 。

ツールのアドレス: https://codepen.io/captainbrosset/pen/ByqRMB

(学習ビデオの共有: CSS ビデオ チュートリアル )

角度値を使用して、グラデーションの方向 (または角度) を指定します。
は、グラデーションの開始色と終了色を指定するために使用されます。

以上がCSS3背景で線形グラデーションを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。