2

我的问题与这个问题有关：Blurry images on stock android browser

除了我有一个更具体的问题。

基本上我在 Android 默认浏览器中有模糊的图像问题。如果我有一个position:fixed带有 的元素z-index:20，那么任何其他具有大于或等于 20 的 z-index 的元素也具有图像（已故的 img 元素或具有背景图像的元素）也将显得模糊。换句话说，确保清晰图像的最大 z-index 值必须小于页面上任何 position:fixed 元素的 z-index。这是演示我的意思的示例代码：

演示网址：http: //jl.evermight.net/blurryposition/z-index.html

代码：

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=0" />
    <style type="text/css">
    div {
        display:block;
        width:100%;
    }
a {
      background-image:url(logotest_big.jpg);
      background-size:60%;
            display:block;
            width:200px;
            height:200px;
      } 
  </style>

    </head>
    <body>
        <div id="top-nav-container"
        style="
    position:fixed;
        top:0px; 
    z-index:20;
        ">
      <a></a>
        </div>
        <div id="top-nav-container-2"
        style="
    position:absolute;
    top:300px; 
    z-index:40;
        ">
            <a></a>
        </div>



    </body>
</html>

该代码演示了一个模糊的图像。但是，如果您更改 z-indexes 使得 position:fixed 元素大于 position:absolute 元素，则 position:absolute 元素将具有清晰的图像。

如何纠正这个问题，以便我可以拥有 z-index 大于位置的 z-index 的非模糊图像：固定元素？

这只发生在一些默认的安卓浏览器上。就我而言，Galaxy note v1 上的 Android 4.0。

4

0 回答 0