ホームページ > 記事 > ウェブフロントエンド > CSSで画像を切り取る方法
CSSで画像を切り取る方法
- WBOYオリジナル
- 2021-11-29 12:01:399540ブラウズ
CSS では、clip 属性を使用して画像を切り取ることができます。この属性は、絶対位置にある要素を切り取るために使用されます。要素が絶対位置にある場合、clip 属性を使用して切り取ることができます。構文は「position」です。 : 絶対;クリップ:rect(上,右,下,左);)」。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
css で画像を切り取る方法
CSS では、clip 属性を使用して画像をクリップでき、clip 属性によりクリップが絶対位置に配置されます。要素。つまり、position:absolute が使用されている場合にのみ有効です。
例は次のとおりです。
<html>
<head>
<style type="text/css">
img {
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>clip 属性剪切了一幅图像：</p>
<p><img border="0" src="/i/eg_bookasp.gif" style="max-width:90%" style="max-width:90%" alt="CSSで画像を切り取る方法" ></p>
</body>
</html>出力結果:
img {
position:absolute;
clip:rect(A,B,C,D);
}
もちろん、特定のピクセル値を書きたい場合には詳しく書きます。
この図の目的は、これら 4 つの値がどの距離を指すのかを示すことです。
A: 親要素の上部からのクリッピング四角形の長さ。
B: 親要素の左側からのクリッピング四角形の長さと四角形の幅。
C: 親要素の上端からのクリッピング四角形の長さと四角形の高さ。
D: 親要素の左側からのクリッピング四角形の長さ。
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSで画像を切り取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで入力ボックスを円形に設定する方法次の記事：CSSで入力ボックスを円形に設定する方法