Png画像をウェブサイトにアップロードしました。Firefox、chrome、safariでは完璧に見えますが、つまり、フォトショップからファイルを保存したので、以下の機能があります。画像を次のように選択できる画像サイズ:バイキュービック自動、バイキュービックシャープ、バイキュービックスムーザー、バイキュービック、バイリニア、最近傍。これらのいずれかが役立ちますか?
html:
<ul class="social">
<li><a target="_blank" href="https://plus.google.com/+ToadhallcottagesCoUk/posts"><img onmouseout=this.src='/images/googleplusgrey-flat.png' onmouseover=this.src='/images/googleplus-flat.png' src="/images/googleplusgrey-flat.png" width="38" height="38" alt="Toad Hall Cottages Google Plus Page"</a></li>
<li><a target="_blank" href="http://www.Twitter.com/thcottages"><img onmouseout=this.src='/images/twittergrey-flat.png' onmouseover=this.src='/images/Twitter-flat.png' src="/images/twittergrey-flat.png" width="38" height="38" alt="Toad Hall Cottages on Twitter" /></a></li>
<li><a target="_blank" href="http://www.facebook.com/holidaycottages"><img <img onmouseout=this.src='/images/facebookgrey-flat.png' onmouseover=this.src='/images/facebook-flat.png' src="/images/facebookgrey-flat.png" width="38" height="38" alt="Toad Hall Cottages Facebook page"/></a></li>
<li><a target="_blank" href="http://www.pinterest.com/thcottages/"><img <img onmouseout=this.src='/images/pinterestgrey-flat.png' onmouseover=this.src='/images/pinterest-flat.png' src="/images/pinterestgrey-flat.png" width="38" height="38" alt="Toad Hall Cottages Facebook page" /></a></li>
</ul>
css:
img.icon {
vertical-align: middle;
margin-right: 8px;
margin-left: 2px;
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Safari */
}
古いIEメソッドは次のとおりです。
-ms-interpolation-mode: bicubic;
これは十分に文書化されていません。