2つのセクションに2つの異なる色を掛け合わせる

Question

background-colorをbackground-blend-mode: multiply;に適用しようとしています。画像： を参照してください。

私はこれに似たものを試しましたfiddle。

ありがとうございます！

Answer 1

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.wrap { 
 
    background: url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg") fixed no-repeat; 
 
    background-size: cover; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    filter: grayscale(100%); 
 
    position: relative; 
 
} 
 
.row { 
 
    width: 100vw; 
 
    height: 70vh; 
 
    background-color: red; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    mix-blend-mode: multiply; 
 
}

<div class="wrap"> 
 
</div> 
 
<div class="row"> 
 
    <h1> 
 
    Header 
 
    </h1> 
 
</div>