我正在写博客,但偶然发现了我想解决的问题,但是我不知道该怎么做。向下滚动页面时,页眉会停留在顶部并缩小为较小的尺寸。这就是我喜欢的方式,并且有效。
徽标也确实会缩小,但是在进行过渡时或拖动滚动条并保持一会儿时,徽标会变得锯齿状。一旦停止滚动,徽标就会再次平滑,但是我希望它在过渡时保持平滑,而不是平滑过渡。有什么办法可以做到?如果可以,怎么办?
您可以在这里查看该网站; 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/