Question

由于某种原因，我页面底部的图像有点像素化。当你将鼠标悬停在它上面时，它会再次恢复正常，并且它也会变大。这种情况也会发生在您解除＆＃34;它。我尝试改变位置：固定。这有帮助，但我不希望这个位置得到修复。 只需在代码段上试一试，就可以了解我的问题。

（我正在使用safari，macOS）

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

CSS

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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) */
 }

我的形象发生了什么？

1 个答案: