2

サンプルコードがあります：

<div class="title"><h3>Test Title<h3></div>

そしてcss

.title {
    background: -moz-linear-gradient(center top , #6F6F6F 0%, #4E4E4E 100%) repeat scroll 0 0 transparent;
}

PC としてブラウザを使用すると結果は問題ありませんが、携帯電話 (samsung galaxy S3、iPhone 4) を使用すると結果がこのスタイルで表示されません。修正方法を教えてください。

4

3 に答える 3

4

問題は、ベンダープレフィックス-mozzoを使用していることです。-mozを読み取っているブラウザのみがこれで動作します。

使用するタイプは次のとおりです。

-moz-linear-gradient
-webkit-linear-gradient
-o-linear-gradient
-ms-linear-gradient
linear-gradient

また、線形グラデーションのみを使用することもできます。ほとんどのブラウザはこれをサポートします。

.title {
    background: linear-gradient(center top , #6F6F6F 0%, #4E4E4E 100%) repeat scroll 0 0 transparent;
}

これを使用してグラデーションを生成することもできます

于 2012-12-28T04:35:27.517 に答える
2

-moz-Gecko搭載ブラウザのベンダー固有のプレフィックスです。Geckoを搭載していないブラウザでは動作しません。その後、構文が標準化されたため、新しいブラウザでは、ベンダープレフィックスを付ける必要がなくなりました。

background: linear-gradient(red, green);

残念ながら、すべての人が新しいブラウザを使用しているわけではないため、ベンダープレフィックスも含める必要があります。

background: -moz-linear-gradient(red, green);
background: -webkit-linear-gradient(red, green);
background: linear-gradient(red, green);

構文が標準化されている場合は、ベンダープレフィックスのみを使用するように騙されないでください。

于 2012-12-28T04:37:51.400 に答える
0

次のように使用する必要があります：

。タイトル {
    背景画像：-webkit-gradient（linear、左上、右下、fr​​om（rgba（255,0,0,1.0））、to（rgba（255,0,0,0.0）））;
}

これらのリンクはあなたを助けることができます：

cross-browser-css-gradient

Gradientの使用に関するAppleコミュニティディスカッション

于 2012-12-28T05:17:43.997 に答える