html - テキストでdiv内に目に見えない正方形を作成する方法は?

Question

下の画像を再現する必要があります。

中央の画像は私の背景です。最初の div にはテキストがあります。このdivの上に、ページの背景を見ることができるように、divの一部をテキストで非表示にする別のdivが必要かもしれません。とにかく、CSS の div の真ん中にこの目に見えない四角を入れることができますか?

この動作が必要な理由は、視差スクロール効果を使用しているためです。

Answer 1

このような：

#text-container {
    width: 500px;
    height: 500px;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

#image-container {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -50px;
    background-color: #aaa;
    z-index: 5;
}

そしてHTML：

<div id="text-container">
    <p>Background text here</p>
    <div id="image-container">
        <img src="picture.jpg" />
    </div>
</div>

上と左を 50% に指定する理由は、画像ボックスが親 div の上と左から 50% になるようにするためです。ただし、これは画像ボックスの上端と左端に適用されるため、最終的に中央に配置されません。マージンを幅と高さの 1/2 に設定すると、ボックスが適切に中央に配置されるようにマージンがオフセットされます。

ここに作業フィドルへのリンクがあります

Answer 2

純粋な CSS でできる最善の方法は、背景画像と完全に一致するテキストの上に画像を配置することだと思います。それは本当の穴ではなく、ただの幻想です。

Answer 3

これには透明な画像を使用することをお勧めします。これにより、背景を公開する「ウィンドウ」が作成されます。また、テキストを重ねて覆うようにテキストをラップできるようにします。