clip: rect(***);
ブラウザ |
|
---|---|
プロパティ |
clip は、要素の切り抜き領域を指定するプロパティです。
- この指定は、positionプロパティで
absolute
またはfixed
を指定している場合に有効です。
このプロパティをimg要素に対して設定すると、画像を切り抜くことができます。
img {
position: absolute;
clip: rect(50px 500px 300px 100px);
}
プロパティ名 | 値 | 説明 |
---|---|---|
clip |
rect(上 右 下 左) |
各辺までの距離を数値+単位(px 等)で指定 |
初期値は auto
(切り抜かない)です。
値の指定方法
rect( )
… ( )
内に、上、右、下、左の順で4つの値を指定します。それぞれの値は半角スペースで区切って記述します。
- CSS 2.1の仕様に従う場合は、半角スペースではなくカンマ(
,
)で区切る必要があります。(ただし、カンマ区切りはIEでは対応していません)
領域の指定方法
表示される領域を、画像(実際の領域)の上端と左端からの距離で指定します。
rect(上辺の距離 右辺の距離 下辺の距離 左辺の距離)
- 上辺の距離 … 画像の上端から上辺までの距離を指定
- 右辺の距離 … 画像の左端から右辺までの距離を指定
- 下辺の距離 … 画像の上端から下辺までの距離を指定
- 左辺の距離 … 画像の左端から左辺までの距離を指定
例えば次のように指定されている場合は、表示される領域の大きさは 400px×250px になります。
rect(50px 500px 300px 100px)
また、次のように auto
(切り抜かない)を指定することもできます。
rect(50px auto auto 100px)