CSSクリッププロパティ
例
画像をクリップします。
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
定義と使用法
画像がそれを含む要素よりも大きい場合はどうなりますか?
このclip
プロパティを使用すると、絶対位置の要素をクリップする長方形を指定できます。長方形は、クリップされる要素の左上隅からの4つの座標として指定されます。
注: 「overflow:visible」の場合、clip
プロパティは機能しません。
注:このclip
プロパティは廃止され、将来的にはプロパティに置き換えられる予定です。
clip-path
デフォルト値: | 自動 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS2 |
JavaScript構文: | object .style.clip = "rect(0px、50px、50px、0px)" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
CSS構文
clip: auto|shape|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
auto | No clipping will be applied. This is default | |
shape | Clips an element. The only valid value is: rect (top, right, bottom, left) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
関連ページ
CSSチュートリアル:CSSポジショニング
HTML DOMリファレンス:クリッププロパティ