如何用文本在div中创建一个不可见的方块？

Question

我需要重现下面的图片。

中心的图像是我的背景。在我的第一个div中，我有一些文字。在这个div上我可能需要一个其他div，它隐藏div的一部分与文本，所以我可以看到我的页面的背景。无论如何，我可以在CSS的div中间有这个隐形方块吗？

我需要这种行为的原因是因为我正在使用视差滚动效果。

Answer 1

position:absolute; left: something; top: something; z-index: 2;

Answer 2

仅在webkit中，您可以使用掩码：

#background, #overlay {
    position: absolute;
    width: 200px;
    height: 400px;
}


#background {
    background: url("yourimage");
}

#overlay {
    top: 0px;
    left: 0px;
    -webkit-mask-position: 0px 0px;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 1) 66%), 
                        linear-gradient(90deg, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 1) 66%); 
    background-color: rgba(255, 255, 255, 0.8);
}

fiddle

我已经用一个小的alpha设置了叠加层的背景，以显示背景div在那里是stiil，只需在实际代码中将其设置为白色。

Answer 3

我建议您使用透明图像。这将创建一个“窗口”来显示您的背景。我还将使您的文本能够将其包裹起来，以便覆盖它。

Answer 4

像这样：

#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宽度和高度偏移它们以使框正确居中。

Here是指向工作小提琴的链接

Answer 5

我认为在纯CSS中你能做的最好的事情就是在你的文本上放置一个与你的背景图像完全匹配的图像。这不是一个真正的洞，只是一种幻觉。