8

背景としての画像と、CSS 線形グラデーションを使用したいと思います。

background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);

デスクトップ ブラウザ (Firefox 44.x; IE 10; Chrome; Safari) では問題はありませんが、モバイル ブラウザでは動作しません (iPhone 5、(9.x) で safari、app firefox、app でテストしました)。クロム）。

私はこれを使用します：

background-image: url("/site/grigliatrasparente.png"), -moz-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -o-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -ms-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#404040), color-stop(2%,#dfbb80),color-stop(98%,#dfbb80),color-stop(100%,#404040));
background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#404040, endColorstr=#dfbb80);
background-color: #dfbb80;

どうしたの？

どうもありがとう、そして私の英語でごめんなさい:)

4

2 に答える 2

3

CSS3 の複数の背景の初期には、グラデーションが背景イメージの代わりになるという問題がありましたが、問題は解決され、mozilla-developerで、モバイルでもうまく機能するアイデアの例を見つけることができます。
css は正常に見えますが、autoprefixr を介して実行してプレフィックスを更新することもできます。
そして、おそらくプレフィックスの 1 つがディスプレイを乱す可能性について考える前に、最初に携帯電話で機能する例 (そしてもちろん css) を確認し、background-repeat と background-position を background-image に設定します。

于 2016-03-05T20:59:49.097 に答える
1

jsfiddle リンクの下を確認してください。私の例では、接頭辞なしの線形勾配は最後の構文に修正されました: (この場合、方向に「to ...」を使用)

background-image: url(http://placehold.it/350x150), linear-gradient(to right, #404040 0%, #dfbb80 2%, #dfbb80 98%, #404040 100%);

https://jsfiddle.net/3u2Lhx6k/

より詳細な情報: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient。

于 2016-03-09T01:14:41.277 に答える