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

您可以定義多個背景，然后將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> 

Answer 2

使用具有透明度和雙background-image 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 3

您可以在：before或：after元素上添加疊加層

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