CSSで画像を切り取る方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで画像を切り取る方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Nov 29, 2021 pm 12:01 PM

css

CSS では、clip 属性を使用して画像を切り取ることができます。この属性は、絶対位置にある要素を切り取るために使用されます。要素が絶対位置にある場合、clip 属性を使用して切り取ることができます。構文は「position」です。 : 絶対;クリップ:rect(上,右,下,左);)」。

CSSで画像を切り取る方法

このチュートリアルの動作環境: 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  src="/static/imghwm/default1.png"  data-src="/i/eg_bookasp.gif"  class="lazy"  border="0"     style="max-width:90%"  style="max-width:90%" alt="CSSで画像を切り取る方法" ></p>
</body>
</html>

出力結果:

CSSで画像を切り取る方法

img  {
position:absolute;
clip:rect(A,B,C,D);
 }

CSSで画像を切り取る方法

もちろん、特定のピクセル値を書きたい場合には詳しく書きます。

この図の目的は、これら 4 つの値がどの距離を指すのかを示すことです。

A: 親要素の上部からのクリッピング四角形の長さ。

B: 親要素の左側からのクリッピング四角形の長さと四角形の幅。

C: 親要素の上端からのクリッピング四角形の長さと四角形の高さ。

D: 親要素の左側からのクリッピング四角形の長さ。

(学習ビデオ共有: css ビデオチュートリアル)

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

cohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか？Apr 23, 2025 am 09:57 AM

まあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。