CSS:Android Web App:颜色渐变问题 [英] CSS: Android Web App: Color gradient issue

问题描述

我正在使用jQuery Mobile和Phonegap开发应用程序.我想在背景中使用从#3c3c3c(灰色)到#000000(黑色)的颜色渐变，但是当我使用此代码时

I am developing an Application with jQuery Mobile and Phonegap. I want to have a color gradient from #3c3c3c (grey) to #000000 (black) in the background but when I use this code

background:  -webkit-linear-gradient(top, #3c3c3c, #000000);

您只能看到一些带有不同灰色阴影的大条形图.因此没有线性梯度.另外，您还可以看到一些绿色和一些紫色的条形图.

you can see just a few big bars with different grey shades. So there is no linear gradient. Also you are able to see some green and some violet bars.

  - Sorry as a new user I am not able to insert a Screenshot - 

我还尝试插入显示颜色渐变的背景图像，但是它的外观也如上所述(我们也尝试使图片的颜色深度最大化，但这也没有改变结果).

I also tried to instead insert a background image which shows a color gradient but this also looks as described above (we have also tried to maximize the color-depth of the picture but this also did not change the result).

设备是否可能无法显示足够的颜色以进行线性渐变? 还有创建线性渐变的另一种可能性吗?

Is it possible that the device is not able to display enough colors for a linear gradient? Is there another possibility for creating a linear gradient?

任何帮助将不胜感激！

我正在与 Galaxy Tab GT-P1000 固件版本2.2

I am testing with Galaxy Tab GT-P1000 Firmware-Version 2.2

推荐答案

涵盖所有基础知识:

        background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c), to( #000000)) !important; /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(#3c3c3c, #000000) !important; /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient(#3c3c3c, #000000) !important; /* FF3.6 */
        background-image:     -ms-linear-gradient(#3c3c3c, #000000) !important; /* IE10 */
        background-image:      -o-linear-gradient(#3c3c3c, #000000) !important; /* Opera 11.10+ */
        background-image:         linear-gradient(#3c3c3c, #000000) !important;

如果不需要，请放掉！important，我用它来覆盖一些默认的jQM样式，这就是为什么，并确保您具有background-clip:border-box; (默认)

Drop the !important if you don't need it, I use it to override some default jQM styles that's why and make sure you have background-clip: border-box; (which is default)

这篇关于CSS:Android Web App:颜色渐变问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！