5

background-size:cover; の背景画像があります。それに適用され、一連の div がオーバーレイされ、個々のクリッピング マスクになりたいと考えています。

私は機能クリップを見てきました: rect(20px, 20px, 20px, 20px,); ただし、div は CMS システムを介して取り込まれるため、セット サイズを定義することは不適切です。

クリッピング マスク プロパティを使用して div を設定し、ページ上で div が配置されている任意の場所に画像をクリップする方法はありますか?

このサイトはレスポンシブであるため、イメージオーバーレイも特に使用したくありません。

4

2 に答える 2

2

私が正しく理解していれば、画面サイズに合わせてサイズが変更されるオーバーレイと、背景画像を含む div を探しているだけですか?

その場合、可能であれば、このように、クリッピングが必要な div の内側にこれらの div を単純に追加しないでください。このサンプルの目的のために、透明な背景と境界線が適用された 1 つの div のみを使用しました。画像を長方形以外の形状でクリップする必要がある場合は、さらに div が必要になります (例: 平行四辺形、菱形、三角形の形状の場合、少なくとも 2 つ必要です)。

また、悲しいことに、CSS は % ボーダーを許可していませんが、この例は

逆に、img div をクリッパー div 内に配置することもできます。どれが一番合うかという問題...

body, html { 
  /* necessary for sizing children in % */
  width: 100%;
  height: 100%;
}
#tobeClipped {
  width: 80%;
  height: 40%;
  position: relative;
  background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
  background-size: cover;
}
#tobeClipped>div {
  position: absolute;
}
#clippers {
  width: 100%;
  height: 100%;
  border: 20px solid grey;
  border-left-width: 100px;
  box-sizing: border-box;
}
<div id="tobeClipped">
    <div id="clippers"></div>
</div>

これがあなたが探していたものではないかどうかを明確にしてください.

于 2013-08-14T17:22:50.677 に答える