在后面显示元素的白色背景上的透明文本颜色

Question

如何创建彩色透明文本，以便可以显示背面看到的元素？

这是有关文本外观的示例：

https://www.screencast.com/t/QIbugOtUjpXo

Answer 1

您必须在该div上使用.png图像作为背景。例如：

$(document).ready(function() {
   $("a").hover(function(event) {
    console.log(event.target.href);
   });
});

然后在您的样式文件中：

<div class="container">
    <div class="title"></div>
</div>

希望有帮助。

Answer 2

您可以使用mix-blend-mode的{​​{1}}属性来实现。

css属性指定元素的内容应如何与其直接父级背景混合。

它带有多种值，使您可以更改背景（目标）和文本（源）以创建一系列不同的效果，其中一个mix-blend-mode就可以满足您的要求。

mix-blend-mode: screen;

.backdrop {
    width: 500px; 
    height: 250px;
    position: relative;
    background-size: 100%;
    background-image: url(https://images.unsplash.com/reserve/AXx3QORhRDKAMrbb8pX4_photo%202.JPG);
}
.text {
    color: black;
    background-color: white;
    mix-blend-mode:screen; 
    width: 100%;
    height: 50%;
    font-weight: bolder;
    text-align: center;
    line-height: 100px;
    margin: 0;
    font-size:60pt;
}