使用帶有深色覆蓋層的圖像是為部落格、登陸頁面或作品集製作漂亮的英雄標題的最快方法之一。這是我經常使用的技巧。
為什麼要為影像加入疊加層？
圖像上的疊加不僅可以提高美觀性，而且可以使文字更具可讀性。
考慮一下我模擬的這個英雄標題。這不太好，不是嗎？
這裡的文字是可讀的。但僅此而已，這是因為我使用了 H1 和 H2 標頭。然而，對於視力不佳的人來說，這裡不太方便，而且觀看起來也很忙。疊加層極大地提高了可讀性，同時使您的設計更加時尚。在這篇文章中，我將向您展示幾種對其進行編碼的方法。
當然，您可以透過多種方式實現最終目標。這是我認為最容易記住的兩種方法。您選擇哪種方法取決於圖像的目的。如果您只追求漂亮的背景，則可以按照自己喜歡的方式進行。或者，如果您的圖像不僅僅是裝飾性的，並且您希望人們注意到它，則應該使用帶有替代說明的圖像標籤以方便存取。
使用圖像標籤和部分背景。
同樣，如果您的圖像不僅僅是裝飾性的，那麼這是您的最佳選擇。這可能不在標題中；它可能位於圖像旁邊或作為文章的一部分。
首先，在一個部分中放置一個 img 標籤。
<header>
<img src="https://bit.ly/2rlzaXi" alt="Five developers at work.">
<section class='hero-header-text'>
<h1>Ellen Macpherson</h1>
<h2>Just another tech blog.</h2>
<button>Read more.</button>
</section>
</header>
我在這裡故意避開了 div。如果您要建立標頭，請確保使用語意 HTML 來定義它。這將有助於考慮可存取性和 SEO。有關為什麼應該使用語義 HTML 元素的更多訊息，請參閱這篇有用的部落格文章。
現在介紹 CSS。確保圖像填滿標題，可以使用高度：100%、寬度：100%，或使用 object-fit: cover。
將背景設定為您想要的顏色。在本例中，我只是將其保持為黑色，但您也可以巧妙地使用線性漸變來真正使事物變得流行（有關詳細訊息，請參閱下一節）。將影像的不透明度設定在 0.3 - 0.5 之間。
header {
height: 600px;
width: 100vw;
background: black;
overflow: hidden;
}
img {
object-fit: cover;
opacity: 0.4;
}
還有中提琴！您的背景看起來更漂亮，可以立即將注意力吸引到文字和號召性用語按鈕上。
優點：允許您設定圖像的替代文字。瀏覽器友善。
缺點：比其他方法涉及更多的 HTML 和樣式。
使用線性漸變
這是我的首選方法。佈局方面涉及的樣式和思考較少。通常，您不會將這些圖像用於描述目的，因此在 CSS 中處理背景似乎更直觀。
在這種情況下，您根本不需要引用 HTML 中的圖像，因此程式碼僅涉及標題（或您想要設定樣式的任何標籤）以及頂部的任何文字或按鈕：
<header>
<section class='hero-header-text'>
<h1>Ellen Macpherson</h1>
<h2>Just another tech blog.</h2>
<button>Read more.</button>
</section>
</header>
請記住，如果沒有 HTML，則無法設定 alt 標籤，因此請確保您使用的圖像純粹是裝飾性的。
儘管 CSS 線性漸變現在得到了很好的支持，但我將使用後備顏色以及 webkit 前綴來確保涵蓋所有瀏覽器的可能性。如果出於某種原因背景圖像加載緩慢，這也可以為您提供後備方案。記住 CSS 中的 C；一切都層疊起來。因此，萬無一失的後備顏色和替代的 webkit 前綴樣式應該始終出現在支援最少的解決方案之前。在本例中，即是 Linear-gradient()。
header {
height: 600px;
width: 100vw;
background: black;
overflow: hidden;
background: #C33764; /* fallback colour. Make sure this is just one solid colour. */
background: -webkit-linear-gradient(rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8)), url("https://bit.ly/2rlzaXi");
background: linear-gradient(rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8)), url("https://bit.ly/2rlzaXi"); /* The least supported option. */
}
img {
object-fit: cover;
}
這裡我們對疊加層有更豐富多彩的解釋：
在此範例中，我使用 RGBA 顏色格式使漸變透明，並將不透明度設為 0.8 以實現大膽的效果。然而，顏色漸層在不同影像上看起來永遠不會相同。嘗試調整不透明度以確保它與您的設計良好配合。為了獲得更多效果，請將影像設為灰階並改變其對比度。
優點：使用更少的程式碼行。更容易實施。
缺點：圍繞瀏覽器支援的問題意味著您必須記住為背景設定後備圖像或顏色。
就是這樣！如果您還有其他實現疊加的好方法，請在評論中告訴我。也讓我知道你最喜歡的漸層👇
原文出處：https://dev.to/ellen_dev/two-ways-to-achieve-an-image-colour-overlay-with-css-eio
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式