CSS文字覆蓋在圖上的方法

最近室友在做一個前端的小專案，遇到了一個問題：如何使用純CSS的方式，讓一個<div>元素同時擁有標題 (<h1>,<h2>,etc) 與 背景圖片 (<background: url(xxx.jepg)>)，而文字又可以覆蓋在背景圖片上呢？

文字敘述不太清楚，我們先來上個範例把（圖截取自星巴克官網）

使用google chrome內建的檢查工具可以看到下圖中的文字是重疊在圖片之上

CSS 偽元素 ( before 與 after )

分析之後，發現當中的奧祕是使用了CSS 偽元素、background-size: cover 以及 background-position: center 這三項功能而已。這裡本人做了一個小小的範例，在一個已經創立好的<div>中，使用CSS偽元素 (::after) 將該<div>複製到父元素的下方，再將其上移到頁面頂部即可。

圖片拉伸、重疊

我把星巴克官網拉到寬長比爲 9999x4511 ，圖片依然沒有重疊或是嚴重比例失衡的現象，如下圖：

所以，我自己心血來潮也做了一個小專案，嘗試把顯示器的長寬比拉的很誇張；但就像星巴克官網一樣，沒什麼太嚴重的重疊或是嚴重比例失衡的現象，如下圖。

看完這篇文章之後，哪怕顯示器像大海一樣寬也不怕圖片會跑掉