CSS3を使用して背景色のグラデーションを実装する

この記事の紹介 CSS3 を使用して背景色のグラデーションを実現する

CSS グラデーションの概念:

CSS グラデーション (グラデーション) を使用すると、カラー グラデーション効果で空間を装飾できます - ある色から別の色に移行します 1 つの色 - 空間を塗りつぶします。グラデーション カラーには、線形 (線形グラデーション) と放射状 (円形グラデーション) の 2 つの形式があります。明らかに、CSS グラデーション カラー (グラデーション) テクノロジーは視覚的なパターン効果を生み出します。この視覚効果を実現するのは非常に簡単で、単純な プログラミング によって実現できます。 CSS グラデーションは CSS3 の非常に早い段階で導入されましたが、このテクノロジーの普及には長い時間がかかりました。

CSS グラデーション テクノロジーの基本構文:

統一コード形式

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

最初のパラメーターは、グラデーションの開始点または角度です。 2 番目のパラメータはカラーストップです。少なくとも 2 つの色 (開始点と終了点) が必要です。任意の色を追加して、色のグラデーションを豊かにすることができます。カラー停止点の 定義 は、色、または色とパーセンテージの組み合わせです:

/*  color-stop(percentage/amount, color) */
color-stop(0.20, red)

次のコードには、基本的にトップダウンのカラー グラデーションのすべてのケースが含まれています:

{	/* 底色 */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), 
　　　　　color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);	
　　　　　/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);	
　　　　 /* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
　　　　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";	
　　　　 /* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* 标准写法 */
	background-image: linear-gradient(#063053, #395873, #5c7c99);
}

CSSグラデーション カラー (グラデーション) テクノロジーは、45 度の角度グラデーションなど、角度を伴うグラデーション方向もサポートします。

/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), 
　　　　　color-s top(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);
}

CSS カラー グラデーション (グラデーション) テクノロジーは貴重ですが、達成が難しい場合もあります。必要なグラデーションがすでに実装されている場合、ブラウザのサポートが問題になることがあります。 CSS カラー グラデーション (グラデーション) の使用に関するいくつかの提案を次に示します:

• CSS カラー グラデーション (グラデーション) である程度の透明度を表示したいですか? rgbaカラーを使用します。

• ブラウザがサポートしていない場合に、うっかり色がないことに気付かないように、背景色を下部として使用します。

• Firefox と Google Chrome は両方とも、repeat-linear-gradient とrepeat-radial-gradient をサポートしています。 使用法は次のとおりです:

background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);

background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);

効果:

基本色の線形グラデーション、上から下へ。

基本色の線形グラデーション、45度の角度 (Chrome、Safari、Firefox、IE10、Opera)

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