css gradient/background_html/css_WEB-ITnose

1. リニアグラデーション（グラデーション変化）

リニアグラデーションとは、直線に沿って一方向にグラデーション効果を生み出すことを指します。

上の写真は黄色から緑へのグラデーションです

background:linear-gradient(

右へは方向を表します(左上右左または度で表します)

黄色、グラデーションの実際の色です

green緑色の勾配端〜％、

25％、

blue

25％、blue

50％、

度、黒25%、透明25%、50%、
黒50%、黒75%、
黒透明75% );背景サイズ: 100 px100px
;性格色 終了色
2. 放射状グラデーション (放射状放射状)
radial-gradient (放射状グラデーションとは、中心から開始して周囲の領域に沿ってグラデーション効果を生成することを指します)

background:radial-gradient(

150px at center

Yellow, green );
//中心点を中心に半径150pxで黄色から緑へのグラデーションを作ります 1. 必要な要素:
a、照射範囲は円の半径 (半径が大きいほど、グラデーション効果が大きくなります)
b 中心点は円の中心です (中心点の位置は基準になります)。ボックス自体に)
背景: 放射状グラデーション( 左中央に 150 ピクセル、
黄色、黄色、 緑 );
c、グラデーション開始色
d、 ient終了色 2. 中心点について: 中心位置はボックスの左上隅を指します

3. 放射範囲について: その半径は変化する可能性があります。つまり、楕円になる可能性があります

div{
px auto; 背景
: 0px,
); 境界半径: 150px
; }
3. 背景 背景画像のサイズ、背景のトリミング領域、背景の配置基準点、複数の背景など、背景も大幅に強化されました。 background-size: width, height 背景画像の幅と高さを設定できます
1、background-size は背景画像のサイズを設定します
Background-size: 600px、自動
ボックスの幅を自動的に調整します。背景サイズ: 100% auto; 幅の送信が変更されると、高さがオーバーフローします。 ， 日常的な使用法では、背景のサイズを 100% まで調整し、ピクセルを調整します。 Background-size:
Auto 100%; オーバーフロー部分は非表示になります。 背景画像全体が背景領域に完全に表示されます。
contain は、画像が常に背景領域に完全に表示されるようにズーム率を自動的に調整します。

長さの単位やパーセンテージも使用できます

2.background-origin (原点、開始点)

背景の位置の原点を設定します

いわゆる背景の原点は、背景の位置の基準点です 調整背景位置の基準原点

background-repeat: no-repeat;