CSSで要素を切り取るにはどうすればよいですか?-CSSチュートリアル-php.cn

CSSで要素を切り取るにはどうすればよいですか?

青灯夜游

リリース： 2018-11-28 16:44:45

オリジナル

4500 人が閲覧しました

CSS のクリップ属性を使用して要素の領域を切り取り、要素の一部のみを表示することができます。残りの表示要素はクリッピング領域と呼ばれます。この記事では、CSS のクリップ属性がどのように要素を切り取るかを紹介します。必要な方は参考にしていただければ幸いです。

CSSで要素を切り取るにはどうすればよいですか?

CSS では、clip 属性は、絶対配置: "position:absolute" または固定配置: "position:fixed" 属性セットを持つ要素でのみ機能します。相対位置指定: "position:relative" または静的位置指定: "position:static" 属性が設定されている要素には影響しません。

クリップを使用する場合、内側のオフセットを指定して、クリップする要素の端の領域を指定できます。

clip プロパティは、値として 1 つの形状関数、rect() 関数のみを受け入れます。 rect() 関数の基本的な構文を見てみましょう。

rect(< top >，< right >，< bottom >，< left >);

ログイン後にコピー

rect() 関数は、要素の上端と左端のオフセットから内側にオフセットされた 4 つのパラメーターを取ることがわかります。。

上と下の値は両方とも上境界からのオフセットを定義し、左と右の値は両方とも左境界からのオフセットを定義します。

CSSで要素を切り取るにはどうすればよいですか?
クリッピングプロパティのオフセットを表示

クロッピング領域、または要素をクリッピングした後に表示されたままになる要素の部分は、rect() のオフセットによって定義されます。 function,rect() 上に示したように、関数が作成できる 長方形の形状 。

要素のクリッピング領域は、クリッピング領域の外側の要素のあらゆる側面 (コンテンツ、子、背景、境界線、テキスト装飾、アウトラインなど) を切り取ります。クリップされたコンテンツはオーバーフローを引き起こしません。

クリップ属性の使用法

基本構文:

clip: auto | rect() | inherit;

ログイン後にコピー

rect() 関数構文:

rect(<top>, <right>, <bottom>, <left>)

ログイン後にコピー

、、、はすべて長さの値を使用して設定されます。

命令:

1. auto:要素はクリップされません。

2. 継承: 要素は親からクリップ値を継承します。

3.rect(): 長方形のクリッピング領域を指定します。つまり、クリップ後の要素の表示領域が長方形であることを指定します。

rect() 関数には 4 つのパラメータがあります。パラメータはカンマ区切りまたはスペース区切りにすることができます。

rect（< top >，< right >，< bottom >，< left >）/ *标准语法* /
/* 要么 */
rect（< top >  < right >  < bottom >  < left >）/ *向后兼容语法* /

ログイン後にコピー

rect() 関数は、キーワード auto をオフセットとして受け入れます。値 auto は、トリミング領域の指定されたエッジが要素の境界ボックスのエッジと同じになることを意味します。

rect() 関数のパラメーター: 上、右、下、左のオフセットは、負の長さの値も受け入れます。

#例: 要素の一部は、垂直方向に「40px」から「150px」の間、水平方向に「80px」から「260px」の間に保持されます。

img {     
   clip：rect（275px，575px，425px，365px）;
}

ログイン後にコピー

レンダリング:

CSSで要素を切り取るにはどうすればよいですか? クリップされた要素の後の表示領域を示す例

古いスペース区切りの構文は Internet Explorer 4 ～ 7 でサポートされているため、これらのブラウザーでクリップが確実に機能するようにします。ブラウザーで有効両方のメソッドを記述できます:

img {     
    clip：rect（40px 260px 150px 80px）; / * IE 4到7 * / 
    clip：rect（40px，260px，150px，80px）; / * IE8 +和其他浏览器* /
}

ログイン後にコピー

クリップ属性の例:

html コード:

<div class="container">
  <p>
   在四个图像上悬停，以查看它们的剪辑区域展开。
  </p>
  <div class="element element-1">
    <img src="images/cat-CSSで要素を切り取るにはどうすればよいですか?" alt="">
  </div>
  <div class="element element-2">
    <img src="images/cat-4.jpg" alt="">
  </div>
  <div class="element element-3">
    <img src="images/cat-3.jpg" alt="">
  </div>
  <div class="element element-4">
    <img src="images/cat-CSSで要素を切り取るにはどうすればよいですか?" alt="">
  </div>
</div>

ログイン後にコピー

CSS コード:

.container {
  margin: 40px auto;
  width: 300px;
  position: relative;
}

.element {
  width: 300px;
  height: 300px;
  z-index: 0;
  position: absolute;
  -webkit-transition: clip .4s ease-in-out, z-index .2s linear .4s;
  transition: clip .4s ease-in-out, z-index .2s linear .4s;
}

img {
  max-width: 100%;
}

.element-1 {
  background-color: #2c3e50;
  clip: rect(0px, 150px, 150px, 0px);
}

.element-2 {
  background-color: #f39c12;
  clip: rect(0px, 300px, 150px, 150px);
}

.element-3 {
  background-color: #16a085;
  clip: rect(150px, 150px, 300px, 0px);
}

.element-4 {
  background-color: #8e44ad;
  clip: rect(150px, 300px, 300px, 150px);
}

.element:hover {
  z-index: 1;
  -webkit-transition: clip .4s ease-in-out .2s, z-index .2s linear;
  transition: clip .4s ease-in-out .2s, z-index .2s linear;
  clip: rect(0px, 300px, 300px, 0px);
}

ログイン後にコピー

レンダリング:

CSSで要素を切り取るにはどうすればよいですか?