ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML と CSS を使用して画像の特定の部分を表示するにはどうすればよいですか?
HTML/CSS で画像の一部を表示する
画像の特定の部分を表示する機能は、Web における一般的な要件です。発達。サムネイルを作成するためでも、特定のセクションを強調表示するためでも、いくつかのテクニックが利用できます。
HTML ソリューション
The
<picture> <source media="(min-width: 1000px)" srcset="image-full.jpg"> <source media="(min-width: 500px)" srcset="image-medium.jpg 50w, image-full.jpg 100w"> <img src="image-small.jpg" alt="default image"> </picture>
clip() を使用した CSS ソリューション
質問で述べたように、clip() プロパティを使用すると、要素内に表示する長方形の領域を定義できます。ただし、要素が絶対的に配置されている必要があります:
.container { position: relative; } #clip { position: absolute; clip: rect(0, 100px, 200px, 0); }
css:url() References
残念ながら、clip() プロパティを直接使用することはできません。 css:url() 参照。ただし、必要な部分を切り取った新しい画像要素を作成し、その画像を元の要素の背景画像として使用することができます:
#element { background-image: url(clip.png); background-position: 50% 0%; }
以上がHTML と CSS を使用して画像の特定の部分を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。