0

3つの要素を積み重ねています。一番上の要素はオーバーレイコンテンツです。2番目の要素は背景の境界線画像です。下の要素は背景です。

私がやりたいのは、真ん中の要素をくり抜いて、上の要素が下の要素に透けて見えるようにすることですが、真ん中の要素の境界は上の要素を囲んでいます。

http://jsbin.com/unimux/4/edit

ご覧のとおり、中央の要素が下の要素への表示をブロックしています。

編集：border-imageを使用してみましたが、border-radiusでは正しくレンダリングされませんでした。

Edit2：border-imageで目的の効果を得ることができますか？ボーダー画像でひどく見えないようにすることができる人には称賛を送ります。

Edit3：ズールの答えに基づくいくつかの進歩： http： //jsbin.com/unimux/15/edit

4

3 に答える 3

1

CSSの現在の状態では実際にそれを行うことはできません。たぶん、一番下の要素を真ん中の要素の上に置いて、機能しますか？

于 2012-06-15T17:24:24.947 に答える
1

たとえば、クラスを使用して新しい要素を設定し.apple、下の要素と同じ画像を持つ他のすべての既存の要素の上に配置します。

JSビンの例が変更されているのを見てください！

  div.apple {
    margin: 100px;
    width: 200px;
    height: 200px;
    background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
  }

画像を中央に配置し、正しいマージン値を指定することで、での「中空」効果をシミュレートしdiv.middleます。

結果のプレビューを参照してください。

最終結果のプレビュー

要素の寸法が同じでない場合、CSS位置を使用すると、すべてを適切な場所に保持するのに役立ちます。

ここに例があります！

于 2012-06-15T17:30:19.867 に答える
1

egasimusによると、CSSでは実際にそれを行うことはできません。

ただし、このようなものを試してみてください。4つdivのsで「ウィンドウ」が作成されます。

于 2012-06-15T17:31:37.600 に答える