带有不透明文本的透明图像背景

Question

我正在尝试使用CSS在透明图像背景的顶部实现不透明文本的透明图像背景。

现在，由于“不透明”功能的级联作用，我只能获得透明图像和透明文本上的透明文本。

我知道常见的解决方案是使用“ rgba”而不是“ opacity”，这样我的文本就不会继承其父对象（图像背景）的透明度。使用纯色背景很容易实现。但是，如果要在使用图像背景时执行相同操作怎么办？

.testimonial-container {
    background-image: url('https://images.pexels.com/photos/3958396/pexels-photo-3958396.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
    width: 100%;
    height: 30rem;
    opacity: 0.2;
}

.testimonial-title {
    color: black;
}

.testimonial-paragraph {
    font-size: 1.2rem;
    margin-top: 5rem;
    opacity: 1;
}

谢谢