1

緑の花の半透明の背景画像があり、画像をきれいに包み込むようになっています。デスクトップブラウザの場合、それは美しく動作します

左右の花が似合う

しかし、モバイルプラットフォームのストックブラウザでは、次のようになります（これは、インデックスPNGを試したときのものですが、完全な24ビットpngでは、同じようにレンダリングされます（同じ滑らかな白い花を除く）

IOSおよびAndroidストックでのレンダリング

これに使用するCSSコードは次のとおりです。

body div.econtainer div.makeitnice div.flowers 
    {
    position:absolute;
    top:0px;
    right:30px;
    background:none;
    background-color: transparent;
    background-image: url(images/greenflowers.png);
    width:790px;
    height:200px;
    }

単に使用し<img src="images/greenflowers.png">ても、背景は白でレンダリングされます。

ストックブラウザで半透明のpngを正しく表示するための解決策を知っている人はいますか？

これは私が使おうとしている透明なpngです：

グリーンフラワー

私はこの背景の上にそれを使おうとしています：

border-bottom-style:solid;
border-bottom-color:#fff;
border-bottom-width:1px;
position:absolute;
top:0px;
left:0px;
width:100%;
height:200px;
max-height:200px;
margin-top:30px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE3OCwyMDEsMCwxKTsiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDEzMywxNTEsMCwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);
background-image: linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -o-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -moz-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -webkit-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -ms-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.0, #859700),
    color-stop(0.4, #B2C900)
);

padding:0px;
overflow:visible;
-webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.20);
-moz-box-shadow:    0px 4px 5px rgba(50, 50, 50, 0.20);
box-shadow:         0px 4px 5px rgba(50, 50, 50, 0.20);
}
4

2 に答える 2

0

これを追加してみてください

getWindow().getAttributes().format = android.graphics.PixelFormat.RGBA_8888;
于 2012-12-05T13:25:06.190 に答える
0

私は大きな手のひらの瞬間を過ごしました。

私はこれと2か月間戦ってきましたが、論理を理解できませんでした. 問題は、幅: 100% というパラメーターを持つ econtainer 要素にありました。

何が起こるかというと、ビューポートの実際のページ幅までの幅のみをレンダリングするということです。

したがって、幅が 480 ピクセルのモバイルのブラウザー画面がある場合、幅が 480 ピクセルに設定され、480 ピクセルのグラデーションがレンダリングされ、横にスクロールしても再レンダリングされません。

この問題は、min-width:1200px; を追加することで解決されました。正しくレンダリングされるようになりました。

これを調べてくれてありがとう...

于 2012-12-05T13:48:09.120 に答える