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

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

Web 開発において、画像の内容を保持したまま、画像の特定の部分のみを表示すること整合性は CSS を使用して実現できます。

CSS クリップを使用するProperty

質問で述べたように、CSSにはクリッププロパティがあります。ただし、クリップされる要素を絶対的に配置する必要があるため、柔軟性が制限されます。

.container {
  position: relative;
}

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

この例では、ID が「clip」の画像には、元の 250x250 ピクセルの画像の中央の 50x50 ピクセル部分のみが表示されます。 .

注: クリップ プロパティは次の構文を使用します。長方形(上、右、下、左)。この場合、上と左の値に 0、右の値に 100px、下の値に 200px を指定しました。

CSS url() の使用方法

CSS url() 参照の場合、現時点では、CSS の一部のみを表示する組み込みの方法はありません。画像。

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