CSS background image screen opacity and saturation with linear gradient [duplicate]

问题

This question already has answers here:

Can I set background image and opacity in the same property? (14 answers)

How to apply a CSS filter to a background image (15 answers)

Can I set an opacity only to the background image of a div? (8 answers)

Closed last month.

So i have a landing page design with includes an image, a gradient and a full page grid. I want to have the following:

A background to my landing page (a grid) that consists of a linear-gradient(to right, color1, color2) that is blended (screen) with two images that have been desaturated and have an opacity of X% each.

I'm nearly there now but struggling to desaturate my images and drop the opacities without affecting the colour of the gradients. How can I apply these? Pseudo selectors??

My current code looks like:

<div class="landingPageBackground">
    ...landing page code
</div>

.landingPageBackground {
    height: 100vh;
    width: 100vw;
    background: 
        url("./images/BridalHair_h720_72dpi.jpg"), 
        url("./images/LowKey_Boudoir3.jpg"),
        linear-gradient(to right, var(--ATP_Blue_Grad_1), var(--ATP_Blue_Grad_2));
    background-size: auto 70vh, 60vw auto, 100%;
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-blend-mode: screen;

    /* need to drop opacity of each image individually and desaturate each one too */
}

Any help would be appreciated.

Thanks

来源：https://stackoverflow.com/questions/58717398/css-background-image-screen-opacity-and-saturation-with-linear-gradient