ブラウザ間の背景勾配の色の違いを修正します

クロスブラウザーの背景グラデーションカラー修理ガイド

開発中、Firefox 12とChrome Canary 21の顕著な色の違いに気付きました。これは明らかに、異なるブラウザがCSS3をレンダリングする方法に関係しています。

以前のCSSコード

background-image: -moz-linear-gradient(top, #5CB6F2, #FFF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#0ae), to(#fff));
background-image: -webkit-linear-gradient(top, #0ea, white);

CSSコードを修正

background: #FFFFFF; /* 用于不支持CSS3的浏览器 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CB6F2', endColorstr='#FFFFFF'); /* 用于IE浏览器 */
background: -webkit-gradient(linear, left top, left bottom, from(#5CB6F2), to(#FFF)); /* 用于webkit浏览器 */
background: -moz-linear-gradient(top,  #5CB6F2,  #FFF); /* 用于Firefox 3.6+ */

やった！ ：）

インターネットエクスプローラー9に表示される方法は次のとおりです。

を使用します。ChromeとSafariには-moz-linear-gradientを使用し、Operaには-webkit-linear-gradientを使用します。 CSSでこれらのプレフィックスを指定することにより、各ブラウザが勾配を予想どおりに解釈できるようにすることができます。 -o-linear-gradient

はChromeおよびSafariに使用され、-webkit-はFirefoxに使用され、-moz- -ms- CSS線形勾配の使用方法は？ -o-

関数を使用できます。この関数では、勾配の方向と使用する色を指定できます。たとえば、

なぜ私のCSSグラデーションがインターネットエクスプローラーで機能しないのですか？

インターネットエクスプローラーは、標準のCSS勾配構文をサポートしていません。代わりに、filter属性を使用して勾配を作成します。たとえば、白から黒への勾配を作成するには、filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');を使用できます。ただし、標準のCSSではなく、IEのすべてのバージョンで機能しない可能性があるため、これは推奨されません。

CSSで放射状勾配を作成する方法は？

CSSで放射状勾配を作成するには、radial-gradient()関数を使用できます。この関数では、勾配の形状とサイズ、および使用する色を指定できます。たとえば、background: radial-gradient(circle, red, yellow, green);は赤から黄色、緑、緑までの円形の勾配を作成します。

CSSグラデーションで透明度を使用できますか？

はい、CSS勾配で透明性を使用できます。これを行うには、rgba()関数を使用して色を指定できます。たとえば、background: linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,255,0,0.5));は半透明の赤から半透明の緑に勾配を作成します。

CSSで対角線勾配を作成する方法は？

CSSで対角線勾配を作成するには、linear-gradient()関数の方向を指定できます。たとえば、background: linear-gradient(to bottom right, red, blue);は、左上隅から右下隅まで、赤から青までの斜めまで勾配を作成します。

1つの要素で複数の勾配を使用できますか？

はい、1つの要素で複数の勾配を使用できます。これを行うには、各勾配をコンマで分離するだけです。たとえば、background: linear-gradient(red, blue), linear-gradient(yellow, green);は2つの勾配を作成します。1つは赤から青、もう1つは黄色から緑です。

CSSで繰り返し勾配を作成する方法は？

cssで繰り返し勾配を作成するには、repeating-linear-gradient()またはrepeating-radial-gradient()関数を使用できます。これらの関数は、非回復に対応する関数と同じように機能しますが、指定された勾配を繰り返します。たとえば、background: repeating-linear-gradient(red, yellow 10%, green 20%);は、赤から黄色、緑、繰り返される勾配を作成します。

以上がブラウザ間の背景勾配の色の違いを修正しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。