來自父元素的背景剪輯文本

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>