我的图像到底发生了什么？答案

【问题标题】：What the heck is happening to my image?我的图像到底发生了什么？
【发布时间】：2018-08-25 00:40:22
【问题描述】：

由于某种原因，我页面底部的图像有点像素化。当你将鼠标悬停在它上面时，它会再次变得正常并且它也会变大。当您“悬停”它时也会发生这种情况。我尝试将位置更改为：固定。这有帮助，但我不希望位置被固定。只需在 sn-p 上尝试一下，你就会了解我的问题。

（我使用的是 safari，macOS）

代码：https://jsfiddle.net/dnsvnr/csLoeaLb/1/

CSS

.insta {
position: absolute;
z-index: 6;
top: 0px;
left: 50%;
transform: translate(-50%, 0);
filter: brightness(0);
transition: filter .3s;
}

.insta:hover {
filter: brightness(0.5);
transition: filter .3s;
}

  <a href="http://www.instagram.com/dnsvnr" target="_blank">
<img src="http://www.dnsvnr.com/instagram-white-300x300-2.png"  class="insta" width="15" height="15"/>
</a>

【问题讨论】：

标签： css image hover pixel

【解决方案1】：

您正在使用大图像，并且在缩小尺寸时它们会变得模糊。尝试添加：

 img{
  image-rendering: -moz-crisp-edges;         /* Firefox */
  image-rendering:   -o-crisp-edges;         /* Opera */
  image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
 }

【讨论】：