我正在写博客,但偶然发现了我想解决的问题,但是我不知道该怎么做。向下滚动页面时,页眉会停留在顶部并缩小为较小的尺寸。这就是我喜欢的方式,并且有效。

徽标也确实会缩小,但是在进行过渡时或拖动滚动条并保持一会儿时,徽标会变得锯齿状。一旦停止滚动,徽标就会再次平滑,但是我希望它在过渡时保持平滑,而不是平滑过渡。有什么办法可以做到?如果可以,怎么办?

您可以在这里查看该网站; http://tidychaotic.nl。下图显示了发生的情况:

Logo jagged http://imgdump.nl/hosted/fc5448a0f5e23978e6ac1cb32ea7d0ec.png

这是我正在使用的代码。 #masthead是较大的标头,而#masthead.fixed-header是较小的标头。

#masthead {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    z-index: 999;
    width: 100%;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#masthead.fixed-header {
    position: fixed;
    top: 0;
    min-height: 35px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

最佳答案

哦好的。
通过链接和您所包含的图片,我了解出了什么问题。

实际上,徽标发生的现象称为别名,这是由于图像的原始宽度和高度所致。

尝试正确缩放它(将其大小调整为177x41px),它将按照您想要的方式工作;-)

关于css - 如何使CSS图像过渡平滑?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25369648/

10-12 12:26
查看更多