Question

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

为什么会这样？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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);
}

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

CSS缩放图像在不透明度转换上锯齿状/像素化

1 个答案: