2

我需要重现下面的图像。

http://i.stack.imgur.com/mh8be.png

中间的图像是我的背景。在我的第一个 div 中，我有一些文字。在这个 div 上，我可能需要另一个 div，用文本隐藏 div 的一部分，这样我就可以看到页面的背景。无论如何我可以在 CSS 中的 div 中间放置这个不可见的正方形吗？

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

4

5 回答 5

1

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

于 2013-08-27T18:30:55.430 回答
1

只有在 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);
}

小提琴

我已经用一点 alpha 设置了覆盖的背景，以显示背景 div 仍然存在，只需在实际代码中将其设置为白色。

于 2013-08-27T19:47:00.483 回答
0

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

于 2013-08-27T18:49:26.350 回答
0

我建议您为此使用透明图像。这将创建一个“窗口”来展示您的背景。我还将使您的文本能够像覆盖它一样环绕它。

于 2013-08-27T18:40:48.817 回答
0

像这样：

#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 会偏移它们，以便框正确居中。

这是一个工作小提琴的链接

于 2013-08-27T18:44:19.860 回答