文字与背景图像相同吗？

Question

我想知道如何在导航器中使文本与导航器后面的大背景图像具有相同的“颜色”。我想让它显示它本来会覆盖的背景图像的一部分。

'color：transparent'和'color：none'显然不起作用。

html {
    background-image: url('backgroundd.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#nav {
    height: 100px;
    background-color: #BC1A8E;
    opacity: 0.8;
}

h1 {
    color: white;
}

谢谢！