2

最新のブラウザと7までのバージョンのIEで機能する背景グラデーションの解決策を探していました。誰かが機能するベストプラクティスを持っている場合は、特定のブラウザで機能するソリューションに遭遇し続けるので、この方法をいただければ幸いです。またはバージョン。少なくともIE7-9、Firefox、Safari、Opera、Chromeで動作するはずです。

4

6 に答える 6

4

これは非常に完全なグラデーションジェネレータ カラージラです

とにかく今のところ、cssには明確な基準がありません。できるだけ早く到着することを願っています！

linear-gradient(#EEFF99, #66EE33)CSS3のようなアプローチを使用して（たとえば、Explorer独自の方法を使用せずに）Explorer 6-8でもグラデーションを確認したい場合は、CssPIEfilterを試すことができます。私はそれを広く使用しました、それはHTMLコンポーネント（.htc）に基づく素晴らしいソフトウェアであり、ボタンに特に適していますが、私の経験では、ページが多くのajax効果に依存している場合、特にフレームのサイズを縮小する場合に問題があります/ page、ボタン/グラデーションが常に更新されるとは限らないため。（とにかくCSS Pieは重要なサイトでも使用されています）

Css PIE

于 2012-09-28T16:21:45.360 に答える
1

このツールを使用してグラデーションを生成します

于 2012-09-28T16:21:47.450 に答える
1

古いブラウザ（<IE7）は、cssグラデーションプロパティをサポートしていません。css3を使用してグラデーションの背景を作成し、古いブラウザに単色を設定できます。

于 2012-09-28T16:23:01.117 に答える
1

IE7はありませんが、これは良いスタートです

         background: -moz-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%, rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(150,150,150,0.2)), color-stop(52%,rgba(80,80,50,0.5)), color-stop(100%,rgba(20,20,20,0.8))); 
         background: -webkit-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: -o-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: -ms-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 

         /* FF3.6+ */ 
         /* Chrome,Safari4+ */
         /* Chrome10+,Safari5.1+ */ 
         /* Opera 11.10+ */
         /* IE10+ */ 
         /* W3C */
于 2012-09-28T16:23:36.920 に答える
0

他の人が言っているように、CSS3はFF、Chromeなどと互換性があります。

IE9の場合、公式のCSS Gradient Background Makerを使用できます。これにより、インラインSVGイメージが生成され、最新のブラウザーのほとんどでもサポートされます（ただし、Safariではいくつかの問題が発生します）。

IE8の場合、次を使用できます

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#000000, GradientType=1);

参照

IE 5.5-7の場合：

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFF, endColorStr=#FFFFFF, GradientType=1);

参照

startColorStrendColorStrかなり自明です。GradientTypeは1、水平および0垂直用です。IE9の前には、放射状または斜めのグラデーションのようなものはありません。

htcソリューション（css3pieなど）は多くの副作用をもたらすため、使用しないことを強くお勧めします。

実装はそれほど簡単ではありませんが、ポリフィルが必要な場合はcssSandpaperがあります。

于 2012-09-28T16:34:12.653 に答える
0

私の答えはHTMLやCSSとは関係ありません。これは、 MSペイントまたはGIMPを使用してグラデーション画像を作成する基本を知っている場合、この手法がすべての種類のブラウザで機能するもう1つの方法です。

于 2012-09-28T16:39:51.217 に答える