線形勾配（）使用

直線勾配「イメージ」を作成する線形勾配（）関数

その構文は次のとおりです。

　　背景：直線勾配（方向、色ストップ1、色STOP2、...）。

方向

　　角度値で指定された勾配方向

　　　　オリエンテーション値：それはなど、トップへ、下へ、左へ、右へ、右上端に共通しています

　　　　角度値：一般的に使用される値は0deg、原稿180°など

カラーストップ1

　　色

　　　　キーワードは、（透明を設けてもよい）、RGBA他のカラー値を赤

　　やめる

　　　　この領域は、換言すれば、これは色の色ブロックの終了位置を占めています

　　PS：少なくとも2色の値

角度値

　　　文書の絵で見てみましょう

　　　　デフォルトの方向の右側の定義に数学的なポイント私たちは、真北の方向から、上向きであることでは0degではないので、北、値は0deg

　　.back { 
        幅：300ピクセル。
        高さ：300ピクセル; 
        位置：絶対; 
        左：50％; 
        トップ：50％; 
        変換：変換（-50％、 - 50％）。
        背景：リニアグラジエント（90deg、＃1 02a0ff、赤）。
    }

　　　　90deg、右勾配線方向の対応がある場合、左から右へ

　　　　場合135degに、勾配線方向に相当右下へ、左に右の点を下げ、反対側は、右左下点-135であります

色 - 終了位置

　　この値は、オプションの停止位置に続く、<色>値組成物であります

　　（-135deg、＃02a0ff 0％、100％赤）、0-100％の割合での端部から線状勾配：色のグラデーションは背景に相当する、非常に均一な領域が占有、両方の場合を上回っています

　　したがって、この領域は変更することができます

　　上記のように、変更されたパラメータ

背景：リニアグラジエント（原稿180°、＃02a0ff 20％が、80％赤）。

　　第一の色に対応する領域の20％が、最初の色は白矢印1つの2初期色のグラデーションであり、最終的に白矢印に勾配が完了したことを示し

　　我々は、開始位置1色の20％、2色端位置の80％を理解できるように、我々は、上位20％及び下位20％が傾斜されていないことがわかります。

　　我々は、以下の結果を与えるために、1色の背後にあるよりも、色の値以上の値を変更しました

背景：リニアグラジエント（原稿180°、＃02a0ff 60％は、20％赤）;

　　影がセクションの内部で生成されるように、カラー1およびカラー2が直接、影を落としていません

三角形の表紙絵を作ります

.box{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

    .box img{
        display: block;
    }

    .back{
        width: 330px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        background: linear-gradient(135deg,transparent 50%,red 50%);
    }

　　<div class="box">
        <div class="back"></div>
        <img src="./img/dflmg.jpg">
    </div>

先记录到这里。

おすすめ