CSSで画像の一部を表示する方法

画像の一部の CSS 表示を実装する方法: まず、HTML 内に背景画像を保持する div を作成します。次に、その div に CSS スタイルを追加し、背景画像の URL を追加します。最後に、「background- 「position」スタイルを選択し、スタイルに適切な負の値を追加します。

このチュートリアルの動作環境: Windows7 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨: "css ビデオ チュートリアル "

CSS で画像の一部だけを表示するにはどうすればよいですか?

まず、背景画像を保持するための div を HTML 内に作成します。

div に CSS スタイルを追加し、背景画像の URL を追加します。

ページを更新すると、画像全体が表示されていることがわかります。

画像内の人物のアバター部分のみを表示する必要があるとします。画像の長さと幅を変更し、サイズを設定する必要があります。アバター部分は約70要素あります。

#次に、背景位置スタイルを追加し、そのスタイルに適切な値を追加します。この値は負の数であることに注意してください。値が異なると、画像の異なる部分が表示されます。調整して試してください。

ページを更新すると、画像のアバター部分のみが表示されていることがわかります。

画像が大きすぎてもコンテナが小さすぎて、完全な画像を表示したい場合は、次のように背景サイズのスタイルを使用できます。形。

ページを実行すると、完全な背景画像がコンテナーに表示されますが、画像は拡大縮小されます。

以上がCSSで画像の一部を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。