CSS - 封面圖像上的漸變？

例如：

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);

這可能嗎？

來源

2017-07-01 laukok

在你的情況，你纔可能更換梯度，而不是圖像。如果你想要通過這個圖像，你需要添加另一個梯度塊。 –

使用rgba透明度和雙background-image。

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>

來源

2017-07-01 12:32:11 Gerard

你可以把覆蓋在：或之前：之後元素

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>

來源

2017-07-01 12:22:28 mikaelrs

或''後選擇器！ –

可以定義多個背景，然後設置background-blend-mode到multiply。事情是這樣的

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>

來源

2017-07-01 12:25:54

注：你可以用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>

來源

2017-07-01 16:51:04

它看起來不錯。謝謝！ :-) – laukok

CSS - 封面圖像上的漸變？

回答

相關問題