スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

連載-18 スタイル clip で画像のトリミング

 画像のファイルを変更しないで、画像の特定のところだけを見せたい時がある。そんなときに使うのが clip です。
 下の画像はクリックすると画像が切り抜かれます。画像は絶対配置されたものを使います。
 クリックすると
   position: absolute; top:0; left:0;
   clip:rect(auto,auto,auto,auto);


   clip: rect(140,250,330,100)';

と変更されて、必要な部分だけを切り抜いて表示します。
 RECTは矩形(rectangle)の意味です。数値は上、右、下、左の順番で切り抜く位置を、上端、左端からのピクセル数で指定したものです。

 トリミングされた画像は、元の画像の位置と同じになりますので、表示位置は絶対位置のTOP、LEFTの値で指定することができます。

<

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。