1

I'm developing an application with phonegap(css3 + html5 + javascript) for iOS and Android 4.x. On Android 4.0.3 device, I use with css a background image as button with this code:

.mycssClass
{
   background-image:url(../images/myImage.png);
   background-repeat:no-repeat;
   background-size:100%;
   background-color:transparent;
   border:none;
   font-weight:300;
   ....
 }

Now, the image is displayed correctly, but if I hold down on the screen, it becomes grainy. If I remove background-size:100%; solved the problem, but the image is not displayed in the correct size. I add some code lines for managing anti-aliasing, based on the proposal of this aid

https://developer.mozilla.org/en-US/docs/CSS/image-rendering

without good result.

Any suggestions?

Thanks in advance, Cristian

4

1 回答 1

0

你的问题有解决方案。

问题是由于 CSS 引擎和 Android WebView 组件中的抗锯齿机制之间的差异而发生的。CSS 抗锯齿图像在缩放之前和浏览器抗锯齿在缩放后应用。

为了避免这种影响，您必须以某种方式禁用缩放。

有一种很好的方法可以保持响应式图像并避免缩放。用 img 标签替换你的背景，并在页面加载后将CanvasImage应用到它们。

CanvasImage将 img 元素替换为与元素在执行时相同大小的画布，因此不会有缩放。

如果您对此有任何问题，请随时联系我。

于 2013-10-15T21:11:12.683 回答