0

背景がimgに設定されたページがあります。top:50% に div (たとえば div_1) があり、これは不透明度 0.6 の水平の黒いバーです。その右の上、左 50% に白い背景の div (コンテンツを含む) を表示したいのですが、これは不透明度 0.6 の角の丸いボックスであり、これを div_2 と呼びます。

div_1 の影響を受けずに、div_2 が直接ページの背景にあるように見せたいです。少し紛らわしいかもしれません。div_2 は div_1 上にあり、div_2 は透明な背景を持っているため、div_1 は div_2 の外観に影響を与えています (黒いボックスの上に白い透明なボックスを配置しているため)。なぜdiv_1を削除しないのですか..?ページの中央に黒いストリップが必要なため、できません。

これの1つが必要かもしれません

1)div_2が存在するdiv_1の正確な部分を切り取ることができるように、アンチクリップの逆のようなもので、div_2がdiv_1からの干渉なしでページの背景に正しく見えるようにします。

2) 追加の div(div_3) を取得し、div_2 の下に存在するページ背景の正確な部分を表示し、div_1 の上に配置してから、div_2 を配置して、ページの背景にあるかのように見せます。

しかし、これら 2 つのソリューションの少なくとも 1 つを実行する方法がわかりません。他の解決策も喜んで受け入れられます。

編集

ここに私がこれまでに持っているコードがあります、

[Code](http://jsfiddle.net/5sDce/)

div_2 に見えない「required」タグのルック アンド フィール、その背後にある div_1 のルック アンド フィールを確認してください。div_2 は角が丸いため、div_1 を div_2 の隣にフロートさせることができません。

誰かがそれを必要とする場合は、以下の私の回答を参照してください。

前もって感謝します。

4

3 に答える 3