這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
最近碰到這樣一個問題，在一張封面上直接顯示書名，可能會存在書名看不太清楚的情況（容易受到背景干擾），如下
為了解決這個問題，設計師提了一個“究極”方案，將書名背后的圖片模糊一下，這個在 CSS 中很好實作，僅需backdrop-filter即可
.name{
backdrop-filter: blur(10px);
}
當然，現在模糊是模糊了，但是邊緣過于“斷層”，導致書名和封面有些“格格不入”，效果如下
如果能夠將邊緣羽化一下，虛化邊緣效果，就可以很好地將書名融入到背景當中
羽化是photoshop術語，羽化原理是令選區內外銜接部分虛化，起到漸變的作用從而達到自然銜接的效果，是ps及其其它版本中的處理圖片的重要工具
這是設計最終羽化后的效果，既能保證文字清晰可見，又能避免太過突兀，如下
設計師實作這個很簡單，用橡皮擦擦一下就可以了，那么 CSS 呢？下面來探討一下 CSS 如何實作羽化的效果，
一、羽化的原理
羽化其實就是將邊緣變得模糊，在 CSS 中其實就是創建一個邊緣模糊的遮罩（mask），也就是需要一種半透明的漸變，
關于遮罩，這里簡單介紹一下，基本語法很簡單，和background的語法基本一致
.content{
-webkit-mask: '遮罩圖片' ;
}
/*完整語法*/
.content{
-webkit-mask: '遮罩圖片' [position] / [size] ;
}
這里的遮罩圖片和背景的使用方式基本一致，可以是PNG圖片、SVG圖片、也可以是漸變繪制的圖片，同時也支持多圖片疊加，
遮罩的原理很簡單，最終效果只顯示不透明的部分，透明部分將不可見，半透明類推
先舉個圓形的例子，這個比較簡單，因為可以直接通過徑向漸變創建
比如，下面有一個頭像，現在直接放在背景上非常突兀
我們可以將這個頭像通過徑向漸變繪制出了一個從不透明到透明的遮罩，達到和背景融合的效果
.head{
-webkit-mask: radial-gradient(closest-side circle,#000 60%, transparent 100%);
}
原理是這樣的
最后效果如下
當然這是圓形的，如果是矩形的呢？
二、矩形的羽化原理
根據上面的分析，如果希望羽化矩形邊緣，需要創建這一個遮罩
那么問題來了，如何創建這一個邊緣模糊的矩形呢？貌似沒辦法直接通過漸變來實作，而且還需要是尺寸自適應的（自動跟隨容器尺寸）
如果單純看這樣一個矩形，還是很容易實作的，通過box-shadow即可實作
.shadow{
width: 200px;
height: 200px;
background:black;
border-radius:10px;
box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
}
根據需求，可以多疊加幾層box-shadow，這里疊加了3層，效果如下
但是問題又來了，這樣一個 dom 無法直接用作mask-image，那如何處理呢？
三、通過 SVG foreignObject 轉換成圖片
上面提到，通過 CSS 陰影可以很輕松的實作我們說需要的效果，但可惜現在還是 dom 階段，所以需要將這個 dom 轉換成影像，
在這里，需要借助 SVG 中的foreignObject元素，通過這個元素，可以將 HTML嵌入到SVG中，輕松實作 dom 轉圖片的效果
有興趣的可以參考之前這幾篇文章
- CSS、SVG、Canvas對特殊字體的繪制與匯出
- CSS & SVG foreignObject 實作文字鏤空波浪影片
原理如下
回到這里，我們僅需要將上面的結果放到foreignObject元素中，由于需要自適應尺寸，這里的body寬高都是100%，如下
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<style>
.wrap{
box-sizing: border-box;
margin: 0;
height: 100%;
padding: 10px;
}
.shadow{
height: 100%;
background:black;
border-radius:10px;
box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
}
</style>
<div ></div>
</body>
</foreignObject>
</svg>
這樣就得到了一個寬高自適應的SVG影像，無論寬高怎么變化，都是撐滿的
別看這么多標簽，這其實已經是一張圖片，可以直接使用，接下來看看如何運用
四、矩形的羽化
其實上面得到的 SVG可以直接當成一個圖片資源，正常使用了，就像這樣
.name{
-webkit-mask: url('./fearher.svg')
}
不過，也可以將這個SVG圖片轉換成行內形式，減少資源依賴，轉換后仍然保持自適應特性
這里推薦張鑫旭老師的SVG在線壓縮合并工具
轉換后就是這個樣子
.name{
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cbody class='wrap' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:10px%7D.shadow%7Bheight:100%25;background:%23000;border-radius:10px;box-shadow:0 0 5px %23000,0 0 10px %23000,0 0 15px %23000%7D%3C/style%3E%3Cdiv class='shadow'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E")
}
效果如下
而且由于尺寸是動態的，換個書名也能完美適應
最后再來對比一下，下面哪個一眼看上去效果最好？
完整代碼可以查看以下任意鏈接
- CSS feather (juejin.cn)
- CSS feather (codepen.io)
- CSS feather (runjs.work)
本文轉載于:
https://juejin.cn/post/7176094306124431421
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548934.html
標籤：其他
上一篇：vue：路由守衛