眾所周知，圖片等一些盒子都可以利用opacity屬性來設置不透明度，但是前兩天我朋友忽然給我一個截圖，截圖效果如下
圖中紅框圈住的位置圖片或者說攝像頭采集的畫面出現了漸變到透明，可以清楚的看到可以看到后面小哥的胳膊，然后問我如何實現這種效果，這下把我難住了（呵 天天給我出難題），我開始在個大論壇開始尋找解決方案；
忽然在前天，日常逛論壇時看到一個文字投影的效果，而后忽然靈機一動就想，能不能變相的實現前兩天我想要的那種效果，於是乎趕緊打開編輯器試了下，發現確實可以把我想要的圖片或者盒子進行投影並給投影設置上漸變顏色及透明，結果出來了，只不過出來的效果他反了
隨后利用transform: rotate(180deg);控制他使出倒掛金鈎此等功夫，果然不負所望，成功翻轉過來
但是我想要的只有投影，因為我想要效果目前只能用投影去實現去控制，但是他卻本體與投影共同出現了，我不想看到本體，太丑了，怎么辦呢，那就給他裝個position: absolute; top給他爸爸裝個position: relative; overflow: hidden;讓他滾出~，結果顯而易見，我勝利了；
我得到了我想要的結果，為了驗證結果，我用文字放在他的下方 看看是否透明；
我真的成功了，哈哈（小開心一會兒），為了再次確認他真是的圖片實現了漸變透明，我把漸變的透明度改成了1（也就是不透明）
事實證明，我真的成功了！！！
吹完牛皮，趕緊附上完成代碼：
css：
html：
最終效果圖：
呃…其實核心就是利用投影來完成的-webkit-box-reflect: below 0 linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1) 100%);
https://www.w3cschool.cn/css3/box-reflect.html