0

background-size プロパティを使用してコンテナのサイズに合わせた背景画像を含む div を作成しています。現在、この div には通常状態とホバー状態があります。両方をスプライトに結合しようとしていますが、正しく表示できません。

これが私のコードです：

.thumb {
width: 18.454%;
}

.thumb .image {
background-image: url('/assets/image.jpg');
background-position: -100% 0;
background-size: cover;
}

.thumb img {
width: 100%;
max-size: 204px;
}

.thumb div は画像に幅を与え、.image div は背景画像を設定し、.thumb img は .image div 内の img であり、動的にサイズ変更されたときに画像の比率を保持するためのものです。

background-position を変更する方法を知る必要があるだけなので、動的に機能します。現在、-100% 0 を使用して画像を移動すると、画像は移動しますが、スプライト内の不適切な場所にあります。

ありがとう！

4

1 に答える 1

1

サイズのエラー (約 4px オフ) は、.image div の行の高さが原因でした。これで問題は解決しました。

.thumb .image {
line-height: 0; /* FIXED */
background-image: url('/assets/image.jpg');
background-position: -100% 0;
background-size: cover;
}
于 2012-10-29T22:16:54.820 に答える