9

私はこの透明なラスターのような背景オーバーレイを持っています：画像へのリンク<-効果を確認するためにブラウザをズームアウトしてみてください

ズームインまたはズームアウトすると（特にモバイルデバイスでは、これが頻繁に発生します）、画像が汚く醜く見える傾向があります。この背景画像を、ページがどのようにズームされていても、画面上で常に10 x 10ピクセルのサイズにして、常に鮮明に見えるようにする方法はありますか？

いくつかの検索を行ったところ、これは難しい作業である可能性があることがわかりました。不可能な場合：ズームアウトまたはズームインしたときに画像が見栄えが良くなるようにズームフィルターを変更する方法はありますか？

4

1 に答える 1

1

モバイル デバイスのディスプレイと同様に、高解像度ディスプレイでは、小さなサイズの画面での高解像度によるピクセル密度の高さが原因で、常にぼやけた効果が生じます。

これを修正する回避策があります。

  • ダブル サイズの背景画像を作成します。画像は 10px 10px です。代わりに 20px 20px を作成します。

  • 目的のサイズを使用して背景画像を適用します。background-size: 10px 10px;

このトリックを使用すると、高解像度ディスプレイで画像を拡大または表示するときに、画像がぼやけなくなります。

コメントで要求されているように、背景サイズをズームに適応させるコードは次のとおりです。

ジャバスクリプト：

if (window.addEventListener){           
    window.addEventListener('resize', setBackground, false);
} else {
    window.attachEvent('onresize', setBackground);
}

function setBackground(){
    document.body.style.backgroundSize =
        (((( window.screen.width / ( window.screen.width / getImageWidth() )) / 10) > 1 ) ? (( window.screen.width / ( window.screen.width / getImageWidth() )) / 10) : 1) + "%";
}

function getImageWidth(){

    var imageSrc = document
                    .body
                     .style
                      .backgroundImage
                       .replace(/url\((['"])(.*?)\1\)/gi, '$2')
                        .split(',')[0];

    var image = new Image();
    image.src = imageSrc;

    var width = image.width;

    return width;

}

HTML:

<body onLoad="javascript:setBackground();" style="background: url(bkg.jpg) repeat;">
于 2012-10-08T12:15:32.280 に答える