CSS - clip

トップ > CSSリファレンス > clip

概要

属性名 clip
auto
| inherit
| rect(<top>, <right>, <bottom>, <left>)
| inset(<top>, <right>, <bottom>, <left>)
初期値auto
適用可能要素ブロックレベル要素
継承継承する
メディアvisual
アニメーションrectange として有効

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS241171

説明

画像などの一部の矩形領域だけをクリップ(抜き出し)し、表示します。position:absolute または position:fixed を適用した要素に対してのみ有効です。CSS3 には採用されず、clip-path に移行する予定です。

説明
autoクリップされません。
inherit親要素の値を継承します。
rect(...)クリップします。<top>, <bottom> は上端からの、 <right>, <left> は左端からのオフセットで指定します。Internet Explorer 4~7 では、カンマのの代わりにスペースで区切る必要があります。
inset(...)クリップします。<top>, <right>, <bottom>, <left> はそれぞれ、上端、左端、下端、右端からのオフセットで指定します。CSS2.1 には採用されていません。サポートしているブラウザも無いようです。

使用例

CSS
.sample-none {
  clip: none;
  position: absolute;
  width: 100px;
  height: 100px;
  left: 10px;
  top: 10px;
}
.sample-rect {
  clip: rect(0px, 40px, 40px, 0px);
  position: absolute;
  width: 100px;
  height: 100px;
  left: 130px;
  top: 10px;
}
HTML
<div style="position:relative; width:500px; height:120px; margin:1em; border:1px solid gray;">
  <img src="../image/back.gif" alt="" class="sample-none">
  <img src="../image/back.gif" alt="" class="sample-rect">
</div>
表示

関連項目

clip-path

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年10月25日
http://www.tohoho-web.com/css/prop/clip.htm