html - CSS 缩放图像在不透明度过渡时呈锯齿状/像素化

Question

我有一个较大的图像正在缩小到缩略图大小，并且在悬停时不透明度将使用 CSS3 过渡改变。它在过渡期间变得锯齿状和像素化，然后恢复正常。我尝试过使用背面可见性，但这似乎没有任何作用，尽管我可能做错了。

为什么会这样？

a img {
  transition: all 0.3s ease-out 0s; 
}
a img:hover { 
  opacity: 0.7; 
}

<h4>Large image scaled small</h4>
<a href="">
  <img src="http://f.cl.ly/items/1U0b1p1k1j1q0v2p0v2S/01.jpg" width="100" />
</a>

<h4>Small image no scale</h4>
<a href="">
  <img src="http://f.cl.ly/items/253s3p1k0I2z3A081P2w/01.png" width="100" />
</a>

Answer 1

在动画期间，浏览器正在重绘受影响的对象。为了保持此过程高效且电池友好，浏览器将使用不同的渲染方法，以便更快地重绘。

由于 CSS 动画仍然相对较新，我希望浏览器会随着时间的推移而改进。在那之前，您可以尝试通过 CSS image-rendering 属性强制浏览器使用不同的渲染方法:

img
{
    image-rendering: crisp-edges;
}

请注意，这仍然是实验性的，当前的浏览器迭代需要各种前缀属性，这些属性在未来可能会随着标准的创建而中断和改变。以下是撰写本文时可用的一些选项:

img
{
    image-rendering: -moz-crisp-edges;
    image-rendering:   -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; 
}

我还注意到有些人通过应用看似毫无意义的 CSS 转换属性来欺骗浏览器始终使用其他渲染函数，如下所示:

img
{
    transform: translateZ(0px);
}

这实际上对图像的描绘方式没有任何影响，除了浏览器将使用不同的渲染方法来掩盖动画效果的开始和结束。