0

このような方法で、小さなボタン アイコンの下に大きな背景を設定する必要があります。

<img 
src="little-icon.png"
style="background: url('main-image.jpg') no-repeat center; 
margin: auto; padding: 0; 
height: 240px; width: 180px;" 
/>

高さと幅は、(大きな) メインの背景画像のパラメーターです。簡単に言うと、img.src をクリック可能なアイコンとして設定し、その背景画像を大きな画像として設定する必要があります。これは、img タグをラップする div タグを使用して行うのは非常に簡単です。しかし、他の状況により、すべてを同じ img タグで行う必要があります。

上のコードはその役割を果たしますが、アイコンは背景のサイズに合わせて変形されます。私がしなければならないことをする機会はありますか？

4

3 に答える 3

0

これを行うにはもっと良い方法があると思いますが、絶対に自分のやり方で行う必要がある場合は、パディングを使用してください-CSSで画像の幅と高さを設定すると、間違いなく変形します...

ここに例を示します(説明として :hover を使用)

于 2012-07-31T11:13:06.070 に答える
0

いいえ、1 つの img タグ内でそれを行う方法はありません。背景と画像自体には同じ高さと幅が割り当てられているため、常に互いに重なり合い、指定した寸法に引き伸ばされたり縮小されたりします。できることは、画像を 1 つにマージすることです。これは、1 つのタグのみのポリシーに本当に行き詰まっている場合のおそらく唯一のチャンスです。

于 2012-07-31T11:01:27.830 に答える
0

確かに、高さと幅のスタイルを img タグに適用すると、メインの画像、つまり src の画像に適用されます。その領域内の背景位置のみを制御できます。

質問によると、下に大きな背景、小さなアイコンが必要な場合は、背景が透明なアイコンの大きな画像を作成する必要があります。

于 2012-07-31T11:05:54.040 に答える