2

私の問題を中心に展開するいくつかの質問がありますが、私がやろうとしていることに関する答えはありません。アンカー タグのクラスを使用して、サイトのロゴにスプライトを使用しています。問題は、ピクセルの高さと幅を定義する必要があり、これによりロゴが反応しなくなることです。

HTMLは次のとおりです。

<a href="<?php echo get_option('home'); ?>/" class="logo-sprite"></a>

CSSは次のとおりです。

a.logo-sprite {
    background: url('image_here.jpg') 0 0;
    display: block;
    width: 450px;
    height: 130px;
}

a.logo-sprite:hover {
    background: url('image_here2.jpg') 0 -140px;
}

何かご意見は？ありがとう。

4

2 に答える 2

0

さて、私は考えがあります。

このプロパティを使用してbackground-size、スプライトを所定の位置に「ロック」し、必要以上に表示されないようにすることができます。これが基本的な例です：

background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 190% 140%;

ここでの唯一の問題は、画像のサイズがDivsやアンカーなどの要素とは異なるため、高さが動的にスケーリングされないことです。これを実現する唯一の方法はJavaScriptを使用することだと思いますが、私は間違っているかもしれません。

次のような方法の大まかな例を次に示します。http： //jsfiddle.net/VW2dW/16/ ブラウザのサイズを変更すると、水平方向に正常にスケーリングされますが、垂直方向にはスケーリングされないことがわかります。これは問題です。

于 2012-11-26T21:41:28.757 に答える
0

それは正しい。スプライトは、定義上、固定サイズのみを対象としているため (結局のところ画像です)、流動的/レスポンシブ レイアウトで「スムーズに」使用することはできません。

メディア クエリの各「レベル」を調整し続ける限り、レスポンシブ レイアウトで使用できます。

于 2012-11-26T21:31:16.613 に答える