CSS - 表紙画像上のグラデーション？

Question

表紙画像にどのようにグラデーションレイヤーを付けることができますか？例えば

：

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.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</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

私はその画像の上に、この勾配をしたい：

background-image: linear-gradient(to bottom right, #002f4b, #dc4225); 

それは可能ですか？

Answer 1

使用rgbaような何か。

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .5), rgba(220, 66, 37, .5)), url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.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</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

Answer 2

あなたは上のオーバーレイを置くことができます：要素

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.jpg'); 
 
    background-size: cover; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
} 
 

 
header:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: linear-gradient(to bottom right,#002f4b, #dc4225); 
 
    opacity: .6; 
 
    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</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

Answer 3

後にあなたが複数の背景を定義することができ、その後、multiplyにbackground-blend-modeを設定：前か。透明性とダブルbackground-imageこの

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-size: cover; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    background-blend-mode: multiply; 
 
    background: linear-gradient(to bottom right, #002f4b, #dc4225), url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.jpg'); 
 
    background-size: cover; 
 
} 
 

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

 
header h1 { 
 
    color: white; 
 
}

<header> 
 
    <h1>Header Content</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

Answer 4

注：グラデーションの強さを変更するopacityで微調整することができます。あなたの状況では

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.jpg'); 
 
    background-size: cover; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    z-index: -1; 
 
} 
 

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

 
header h1 { 
 
    color: white; 
 
} 
 

 
div#gradient { 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
width: 100%; 
 
height: 300px; 
 
background-image: linear-gradient(to bottom right, #002f4b, #dc422b); 
 
border-bottom-left-radius: 50%; 
 
border-bottom-right-radius: 50%; 
 
z-index: -1; 
 
opacity: 0.75; 
 
}

<header> 
 
    <div id="gradient"></div> 
 
    <h1>Header Content</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>