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/imghw/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 までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7414

CakePHP チュートリアル

1359

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

ブートストラップリストでデフォルトスタイルを削除する方法は？ Apr 07, 2025 am 10:18 AM

ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な！の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。

ブートストラップフレームワークを構築する方法 Apr 07, 2025 pm 12:57 PM

ブートストラップフレームワークを作成するには、次の手順に従ってください。CDN経由でブートストラップをインストールするか、ローカルコピーをインストールします。 HTMLドキュメントを作成し、ブートストラップCSSを＆lt; head＆gt;にリンクしますセクション。 bootstrap javascriptファイルを＆lt; body＆gt;に追加するセクション。ブートストラップコンポーネントを使用して、ニーズに合わせてスタイルシートをカスタマイズします。

ブートストラップナビゲーションバーの設定方法 Apr 07, 2025 pm 01:51 PM

ブートストラップは、ナビゲーションバーをセットアップするための簡単なガイドを提供します。ブートストラップライブラリを導入してナビゲーションバーコンテナを作成するブランドアイデンティティの作成ナビゲーションリンクの作成他の要素の追加（オプション）調整スタイル（オプション）

ブートストラップのレイアウト方法 Apr 07, 2025 pm 02:24 PM

Bootstrapを使用してWebサイトをレイアウトするには、グリッドシステムを使用してページをコンテナ、行、列に分割する必要があります。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント（XS、SM、MD、LG、XL）に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップにファイルをアップロードする方法 Apr 07, 2025 pm 01:09 PM

ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。