CSS缩放图像在不透明度过渡时呈锯齿状/像素化 [英] CSS Scaled Image Jagged/Pixelated on Opacity Transition

问题描述

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

I have a larger image that is being scaled down to thumbnail size, and on hover the opacity will change using a CSS3 transition. It becomes jagged and pixelated for the duration of the transition and then goes back to normal. I have tried using backface visibility but that doesn't seem to be doing anything, though I could be doing it wrong.

为什么会发生这种情况？

Why is this happening?

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>

推荐答案

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

During an animation, the browsers are redrawing the affected objects. In order to keep this process efficient and battery-friendly, browsers will use a different rendering method so the redraw is quicker.

由于CSS动画仍然相对较新，我会期待浏览器随着时间的推移而改在此之前，您可以尝试通过CSS图像呈现属性强制浏览器使用不同的呈现方法：

Since CSS animations are still relatively new, I would expect browsers to improve over time. Until then, you can try to force the browser to use a different rendering method via CSS image-rendering property:

img
{
    image-rendering: crisp-edges;
}

注意，这仍然是实验性的，当前的浏览器迭代需要各种带前缀的属性，随着标准的制定，这可能会在未来发生变化。以下是撰写本文时的一些选项：

Note, this is still experimental and current iterations of browsers require various prefixed attributes, which will likely break and change in the future as standards are created. Here are a few options available at the time of writing:

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转换属性，如下所示：

I've also noticed some people tricking the browser to always use the other rendering functions by applying a seemingly pointless CSS transformation property, like so:

img
{
    transform: translateZ(0px);
}

这对图像的描绘方式没有任何帮助，除了浏览器将会使用不同的渲染方法，该方法应该掩盖动画效果的开始和结束。

This effectively does nothing to how the image is portrayed, except that the browser will use a different rendering method which should mask the animation effect starting and ending.

这篇关于CSS缩放图像在不透明度过渡时呈锯齿状/像素化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！