HTML/CSS を使用して画像の特定の部分を表示するにはどうすればよいですか?

HTML/CSS で画像の一部を表示する

Web 開発では、画像の特定の部分を表示する必要がある状況が発生することがあります。 HTML または CSS コード内の画像。これは、さまざまな手法で実現できます。

1 つの方法は、clip CSS プロパティを利用することです。ただし、質問で述べたように、この方法では要素を絶対的に配置する必要があります。画像の一部をクリップするには、clip プロパティ内の rect() 関数を使用できます。この構文は次のとおりです。

clip: rect(top, right, bottom, left);

たとえば、250x250 ピクセルの画像の中央の 50x50 ピクセル部分を表示するには、次の CSS を使用します。

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}

画像を表示するための別のテクニック画像の一部は、CSS 内の url() 関数を利用します。ただし、url() 関数はクリッピング機能をサポートしていません。これを実現するには、画像の必要な部分を含む透明 PNG を作成し、url() 関数を使用してそれを表示するなどの手法を組み合わせて使用​​できます。

以上がHTML/CSS を使用して画像の特定の部分を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。