画像などの一部の矩形領域だけをクリップ(抜き出し)し、表示します。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 には採用されていません。サポートしているブラウザも無いようです。 .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; <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">

http://www.w3.org/TR/CSS2/visufx.html#clipping

http://www.w3.org/TR/css-masking/#propdef-clip

http://momdo.github.io/css2/visufx.html#propdef-clip

https://developer.mozilla.org/ja/docs/Web/CSS/clip

http://caniuse.com/#search=css%202.1%20properties