clip

Home>CSS>プロパティリファレンス>clip

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

clipプロパティの役割

clipプロパティは、絶対配置指定がされた要素の、特定の領域を表示します。

絶対配置指定とは、positionプロパティにabsoluteが指定された状態のことをいいます。

clipプロパティに設定できる値

auto 切抜きなし。領域がすべて表示される。
rect 上、右、下、左の順に座標をピクセルで指定。

rectでの座標指定は、2パターンあります。

半角スペースで区切る

rect(10px 100px 50px 10px);

カンマで区切る

rect(10px,100px,50px,10px);

clipプロパティの使い方

<img src="../../../data/img/global/logo.jpg" style="position:absolute;clip:rect(10px 100px 50px 10px);" />

上のサンプルでは、ロゴマークの画像のうち、上右下左の座標を「10px 100px 50px 10px」の部分を切り出して表示します。

マウスオーバーで画像を表示する

マウスを画像の上にのせると、その画像の全体を表示するサンプルです。hover疑似クラスにclip:autoを指定して、元のサイズの画像を表示するように指定しています。

関連リンク

よく読まれている記事

UpDate:2010-7-25