CSS如何實現這種背景效果？

01-05

第一個背景是未經處理的靜態圖片/第二個背景是經過模糊和其他額外處理（這裡只用模糊來舉例，實際可能比這個複雜，不能在客戶端生成——比如我還需要其他的一些額外的處理）的靜態圖片，寬度與窗口一致，高度自動（保持比例）。
然後放置容器——這類容器有兩種情況（一種就是如圖所示，自定義外形/中間鏤空）（另一種就是寬度高度動態設置/中間無鏤空/含有文字元素）/在滾動的時候能正確顯示，就是圖中的效果。(容器還有投影效果)
問題具體是：

能否單純使用CSS實現？
原圖：

CSS 的話，flexbox 布局，filter blur 模糊，box shadow陰影，如果需要鏤空的話，用 mask 做 layer composite subtraction。

其實這個問題可以完全不需要使用js的，css3便可勝任。於是我闡述一下基本原理：1、模糊特效使用filter:blur；2、陰影效果使用box-shadow；3、鏤空效果最簡單的方法就是使用mask-image；4、透明層效果使用background-color: rgba()或opacity；5、防止模糊外漏使用overflow: hidden。

基本的層邏輯順序是：

&<背景層&>

…&<陰影層&>

……&<遮罩層&>

………&<模糊層&>…模糊層必須和內容並列(因為層內元素都會被模糊)

………&

………&<透明層&>…此處為最頂層內容

………&

……&

…&

於是我寫了一個比較簡單的例子（如下圖所示）：

// 知乎傳圖失敗了N次，好糾結啊=_=||| 另外請無視背景圖片的人物

效果就是上面這樣的，遮罩我要講一下，這裡用的png圖片，如下圖所示：

這裡遮罩圖片是有講究的，如果在PS中查看，白色部分是透明區域，黑色部分就是實色區域。也就是透明的部分即為挖空區域，支持漸變/虛化/外發光等的半透明使用（其實原理就是將RGBA的α透明通道提取疊加在了頁面上），利用這個原理還可以做毛玻璃效果：

上圖遮罩後得到如下效果：

還有人會問，圖片體積太大，而且瀏覽器放大頁面了，虛化效果不就模糊了嗎？這個不是問題，因為可以支持svg，只不過svg必須是黑白的，不能透明色，虛化過渡可以使用黑白過渡，半透明就是灰色的，具體使用方法我就不再展開了，大家自行谷歌吧。補充說明與延伸

【1】樓主如果想實現窗體非固定位置要怎麼辦？（圖片位置不確定了）

其實大家可以試試css3的calc()參數功能，類似於函數計算

當有數值填寫的屬性，例如width、height、top、left……就可以用到它，很強大哦

格式是 left: calc( ((100% - 50px)/2)*5 ) 這樣的

100%是父項的寬度，支持加減乘除，但是加減符號前後務必要加空格

【2】鏤空文字的陰影能不能也一起做出來呢？

答案是：當然可以了！我只不過是偷懶了而已，其實完全能做出來的，方法也有很多。我舉個傻瓜一些的方法，你可以在那個鏤空的位置上覆疊文字，文字顏色全透明，外加文字內陰影（text-shadow）

【3】為什麼樓主圖片的模糊區域變亮了？如何實現的？

這個太簡單了，還是filter特效，這裡我只是給大家演示了blur模糊的用法，其實樓主原圖的效果還用了提高亮度/飽和度/對比度之類的特效，大家自行百度嘍，filter效果非常豐富的。下面是我追加了filter: blur(5px) saturate(1.3) brightness(1.5); 的效果圖：

簡易代碼：

& & & & &遮罩特效& &