CSS - Cover Image Gradient Over

Question

私は、表紙画像の上にグラデーションレイヤーを作成しようとしています。私はなぜこのように起こっているのか分かりません。

以下のコードをご覧ください。

出典：例えばWallpaper

：

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: url('http://wallpaperlatest.com/wp-content/uploads/latest-wallpapers-in-full-hd-definition.jpg'); 
 
    background-size: cover; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 100px 0; 
 
    font: 44px "Arial"; 
 
    text-align: center; 
 
} 
 

 
header h1 { 
 
    color: white; 
 
}

<header> 
 
    <h1>Header Content | Source: http://wallpaperlatest.com</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content | Source: http://wallpaperlatest.com/</h1> 
 
</section>

Answer 1

これを試してみてください：

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .8), rgba(220, 66, 37, .8)), url('http://wallpaperlatest.com/wp-content/uploads/latest-wallpapers-in-full-hd-definition.jpg'); 
 
    background-size: cover; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 100px 0; 
 
    font: 44px "Arial"; 
 
    text-align: center; 
 
} 
 

 
header h1 { 
 
    color: white; 
 
}

<header> 
 
    <h1>Header Content | Source: http://wallpaperlatest.com</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content | Source: http://wallpaperlatest.com/</h1> 
 
</section>