Question

我有以下页面：fiddle。目前，Chrome（47.0.2526.106米）使用灰度抗锯齿渲染固定标题文本：

虽然我想维持“默认”抗锯齿，但不使用任何类型的3D变换：

在链接小提琴中，可以使用以下选项：

从transform: perspective(900px) rotateY(-30deg);

.img

从z-index: 999;中移除#header（无论出于何种原因，这在小提琴中都不起作用，因此您必须使用下面的复制 - 面食代码在专用的浏览器标签中显示它）
从position: fixed;中移除#header（也不适用于小提琴）

但是，所有这些选项都会对我要避免的页面的其他部分产生巨大的视觉影响。所以我的问题是，如何保持“默认”抗锯齿（无论这种AA的适当术语是什么），同时还能够使用z-index / fixed position / rotateY？

HTML：

<div id="header">
  blah BLAH blah
</div>

<div class="img"></div>

CSS：

#header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    background: #ccc;
    box-shadow: 0 0 1em 0 #000;
    text-align: center;
}

.img {
    width: 200px;
    height: 200px;
    transform: perspective(900px) rotateY(-30deg);
    background: black;
}

.html文件（对于z-index /位置技巧）

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #header {
                width: 100%;
                position: fixed;
                top: 0;
                z-index: 999;
                background: #ccc;
                box-shadow: 0 0 1em 0 #000;
                text-align: center;
            }

            .img {
                width: 200px;
                height: 200px;
                transform: perspective(900px) rotateY(-30deg);
                background: black;
            }
        </style>
    </head>

    <body>
        <div id="header">
          blah BLAH blah
        </div>

        <div class="img"></div>
    </body>
</html>

如何防止Chrome切换到灰度抗锯齿？

0 个答案: