是否有可能通过CSS实现这种透明度和饱和度？

我正试图用CSS实现Photoshop/Avocode中的相同视图。 但不管我如何重叠背景和设置了哪些不透明度级别，我都无法达到相同的透明度和饱和度

是否可以使用CSS

.parent{
高度：300px；
宽度：650px；
显示器：flex；
}
.孩子{
位置：相对位置；
弹性：1；
背景图片：url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=格式和配合=裁剪&w=634&q=80）；
背景位置：中心；
宽度：50%；
身高：100%；
}
.孩子：：之后{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
/*背景色：rgba（102207235.7）*/
背景色：rgba（34186226，.7）；
}
.儿童1{
弹性：1；
背景图片：url(https://i.imgur.com/t2IIhj1.png);
背景位置：中心；
宽度：50%；
身高：100%；
}

---

不确定这是否符合您的需要，但可以作为实现这一点的一种方法

.parent{
位置：相对位置；
高度：300px；
宽度：200px；
背景图片：url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=格式和配合=裁剪&w=634&q=80）；
背景位置：中心；
}
.parent：：之后{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：rgb（102207235）；
不透明度：.7；
}

---

您可以使用线性渐变，将其放置在背景图像中的图像前面。以下是解决方案：

.parent{
高度：300px；
宽度：200px；
}
.孩子{
背景图像：线性渐变（rgba（102207235,0.5），rgba（102207235,0.5）），url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=格式和配合=裁剪&w=634&q=80）；
不透明度：1；
/*
过滤器：饱和（2）；
*/
背景位置：中心；
宽度：100%；
身高：100%；
}

---

添加一个

混合模式

可能会帮助您更接近：

.parent{
高度：300px；
宽度：650px；
显示器：flex；
}
.孩子{
位置：相对位置；
弹性：1；
背景图片：url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=格式和配合=裁剪&w=634&q=80）；
背景位置：中心；
宽度：50%；
身高：100%；
}
.孩子：：之后{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：rgba（34186226.7）；
混合模式：硬光；
}
.儿童1{
弹性：1；
背景图片：url(https://i.imgur.com/t2IIhj1.png);
背景位置：中心；
宽度：50%；
身高：100%；
}

是的，我试过了，但这样会失去一些“清晰度”，您可以按rgba颜色中的最后一个数字编辑透明度。我将其设置为0.5，您可以使用它并找到适合您的理想组合。搜索更多关于线性渐变的信息，这是一些很酷的设计风格：D rgba（102207235,0.5）当然，但它没有提供相同的外观（你到底想要什么外观？你可以使用rgba颜色中的不透明度来找到你需要的外观。我用并排的图像更新了我的问题，但是是的，它看起来像“玩颜色”可能会有帮助。没有必要在梯度tho。谢谢你的想法！哦，是的，这绝对应该工作！谢谢你。