clip
切り抜き
clip: 値;
要素の切り抜き領域を指定するプロパティです。
この指定は、positionプロパティで absolute または fixed を指定している場合に有効です。
※このプロパティについては、ブラウザの対応状況の関係上、CSS 2.1の仕様をベースにして説明しています。
clip: rect(50px 500px 300px 100px);
プロパティ名 | 値 | 説明 |
---|---|---|
clip | auto | 切り抜かない (初期値) |
rect(長さ) | 数値+単位(px 等) |
- 「長さ」には、上、右、下、左の順で4つ値を指定します。それぞれの値は、カンマ( , )または半角スペースで区切って記述します。(IEではカンマ区切りに対応していないため、半角スペースで区切ることをお勧めします)(ただし、CSS 2.1の仕様では、カンマで区切る必要があるとされています)
切り抜き領域の指定方法
rect(上辺の距離 右辺の距離 下辺の距離 左辺の距離)
上記の図のように、それぞれの値はボックス(実際の領域)の上端と左端を基準とした距離で指定することになります。
rect(50px 500px 300px 100px)
例えば上記のように指定されている場合は、「表示される領域」の大きさは 400px×250px になります。
500px(右辺) - 100px(左辺) = 400px(幅)
300px(下辺) - 50px(上辺) = 250px(高さ)
.example {
position: absolute;
clip: rect(50px 500px 300px 100px);
}