ChromeやEdgeなどのWebkit系ブラウザで、背景画像がボヤけるケースがある。
backface-visibility: hidden;を指定することで改善できることもあるが、他のプロパティとの兼ね合いでうまくいかないこともある。その場合はimage-renderingプロパティを使用する。
div a {
display: block;
width: 150px;
height: 80px;
text-indent: -9999px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 150px 80px;
image-rendering: -webkit-optimize-contrast;/* 追記 */
}image-renderingプロパティは画像が拡大・縮小された場合の描画方法を指定するものである。
image-renderingプロパティには、以下のような値を指定できる。
div {
image-rendering: auto; /* なめらか処理（初期値） */
image-rendering: crisp-edges;/* なめらか処理しない */
image-rendering: -webkit-optimize-contrast; /* crisp-edgesのWebkit用ベンダープレフィックス */
image-rendering: pixelated; /* ドット絵っぽく */
}