来自父元素的背景剪辑文本

Question

我有一个全屏背景的页面，上面有一些黑色背景的块。 我想实现那些黑色块中的文本看起来像是从黑匣子中剪下来的，这样你就可以看到背景图像。

下面是 HTML 和 CSS 设置的简化版本：

 .background { background-image: url(https://picsum.photos/200/300); height: 100vh; width: 100vw; }.blackbox { background-color: black; padding: 30px; display: inline-block; margin-top: 100px; margin-left: 400px; }.text { font-size: 40px; font-weight: bold; font-family: 'Helvetica', 'Arial', sans-serif; background-clip: text; -webkit-background-clip: text; color: transparent; background-image: url(https://picsum.photos/200/300); }

 <div class="background"> <div class="blackbox"> <div class="text">TEXT</div> </div> </div>

如果我将背景图像移动到子文本元素，则剪辑可以工作，但它与父元素上的背景图像不匹配。 我认为这个问题有我的答案，但子元素没有背景。

Answer 1

这应该是响应式的。 mix-blend-mode是您正在寻找的：

来源（ https://www.w3schools.com/howto/howto_css_cutout_text.asp ）

 .background { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png); background-size: cover; position: relative; height: 200px; }.text { background-color: black; color: white; font-size: 5vw; font-weight: bold; margin: 0 auto; padding: 0 15px 0 15px; text-align: center; position: absolute; height: 200px; line-height: 200px; mix-blend-mode: multiply; /* This makes the cutout text possible */ }

 <div class="background"> <div class="text">TEXT</div> </div>