自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS 如何實(shí)現(xiàn)羽化效果？

作者：XboxYan
開(kāi)發(fā) 前端
通過(guò) CSS 陰影可以很輕松的實(shí)現(xiàn)我們說(shuō)需要的效果，但可惜現(xiàn)在還是 ??dom?? 階段，所以需要將這個(gè) dom 轉(zhuǎn)換成圖像。

最近碰到這樣一個(gè)問(wèn)題，在一張封面上直接顯示書(shū)名，可能會(huì)存在書(shū)名看不太清楚的情況（容易受到背景干擾），如下

圖片

為了解決這個(gè)問(wèn)題，設(shè)計(jì)師提了一個(gè)“究極”方案，將書(shū)名背后的圖片模糊一下，這個(gè)在 CSS 中很好實(shí)現(xiàn)，僅需backdrop-filter即可

.name{
  backdrop-filter: blur(10px);
}

當(dāng)然，現(xiàn)在模糊是模糊了，但是邊緣過(guò)于“斷層”，導(dǎo)致書(shū)名和封面有些“格格不入”，效果如下

圖片

如果能夠?qū)⑦吘売鸹幌拢摶吘壭Ч?，就可以很好地將?shū)名融入到背景當(dāng)中。

羽化是photoshop術(shù)語(yǔ)，羽化原理是令選區(qū)內(nèi)外銜接部分虛化，起到漸變的作用從而達(dá)到自然銜接的效果，是ps及其其它版本中的處理圖片的重要工具。

這是設(shè)計(jì)最終羽化后的效果，既能保證文字清晰可見(jiàn)，又能避免太過(guò)突兀，如下：

圖片

設(shè)計(jì)師實(shí)現(xiàn)這個(gè)很簡(jiǎn)單，用橡皮擦擦一下就可以了，那么 CSS 呢？下面來(lái)探討一下 CSS 如何實(shí)現(xiàn)羽化的效果。

一、羽化的原理

羽化其實(shí)就是將邊緣變得模糊，在 CSS 中其實(shí)就是創(chuàng)建一個(gè)邊緣模糊的遮罩（mask），也就是需要一種半透明的漸變。

關(guān)于遮罩，這里簡(jiǎn)單介紹一下，基本語(yǔ)法很簡(jiǎn)單，和background的語(yǔ)法基本一致

.content{
  -webkit-mask: '遮罩圖片' ;
}

這里的遮罩圖片和背景的使用方式基本一致，可以是PNG圖片、SVG圖片、也可以是漸變繪制的圖片，同時(shí)也支持多圖片疊加。

遮罩的原理很簡(jiǎn)單，最終效果只顯示不透明的部分，透明部分將不可見(jiàn)，半透明類推

圖片

先舉個(gè)圓形的例子，這個(gè)比較簡(jiǎn)單，因?yàn)榭梢灾苯油ㄟ^(guò)徑向漸變創(chuàng)建

比如，下面有一個(gè)頭像，現(xiàn)在直接放在背景上非常突兀

圖片

我們可以將這個(gè)頭像通過(guò)徑向漸變繪制出了一個(gè)從不透明到透明的遮罩，達(dá)到和背景融合的效果

.head{
  -webkit-mask: radial-gradient(closest-side circle,#000 60%, transparent 100%);
}

原理是這樣的：

圖片

最后效果如下：

圖片

當(dāng)然這是圓形的，如果是矩形的呢？

二、矩形的羽化原理

根據(jù)上面的分析，如果希望羽化矩形邊緣，需要?jiǎng)?chuàng)建這一個(gè)遮罩

圖片

那么問(wèn)題來(lái)了，如何創(chuàng)建這一個(gè)邊緣模糊的矩形呢？貌似沒(méi)辦法直接通過(guò)漸變來(lái)實(shí)現(xiàn)，而且還需要是尺寸自適應(yīng)的（自動(dòng)跟隨容器尺寸）

如果單純看這樣一個(gè)矩形，還是很容易實(shí)現(xiàn)的，通過(guò)box-shadow即可實(shí)現(xiàn)

.shadow{
  width: 200px;
  height: 200px;
  background:black;
  border-radius:10px;
  box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
}

根據(jù)需求，**可以多疊加幾層box-shadow**，這里疊加了3層，效果如下

圖片

但是問(wèn)題又來(lái)了，這樣一個(gè) dom 無(wú)法直接用作mask-image，那如何處理呢？

三、通過(guò) SVG foreignObject 轉(zhuǎn)換成圖片

上面提到，通過(guò) CSS 陰影可以很輕松的實(shí)現(xiàn)我們說(shuō)需要的效果，但可惜現(xiàn)在還是 dom 階段，所以需要將這個(gè) dom 轉(zhuǎn)換成圖像。

在這里，需要借助 SVG? 中的foreignObject[1]元素，通過(guò)這個(gè)元素，可以將 HTML?嵌入到SVG?中，輕松實(shí)現(xiàn) dom 轉(zhuǎn)圖片的效果。

原理如下：

圖片

回到這里，我們僅需要將上面的結(jié)果放到foreignObject?元素中，由于需要自適應(yīng)尺寸，這里的body?寬高都是100%，如下

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <body class="wrap" 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 class="shadow"></div>
    </body>
  </foreignObject>
</svg>

這樣就得到了一個(gè)寬高自適應(yīng)的SVG圖像，無(wú)論寬高怎么變化，都是撐滿的。

圖片

別看這么多標(biāo)簽，這其實(shí)已經(jīng)是一張圖片，可以直接使用，接下來(lái)看看如何運(yùn)用

四、矩形的羽化

其實(shí)上面得到的 SVG可以直接當(dāng)成一個(gè)圖片資源，正常使用了，就像這樣

.name{
  -webkit-mask: url('./fearher.svg')
}

不過(guò)，也可以將這個(gè)SVG圖片轉(zhuǎn)換成內(nèi)聯(lián)形式，減少資源依賴，轉(zhuǎn)換后仍然保持自適應(yīng)特性。

這里推薦張?chǎng)涡窭蠋煹腟VG在線壓縮合并工具 [2]。

轉(zhuǎn)換后就是這個(gè)樣子：

.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")
}

效果如下

圖片

而且由于尺寸是動(dòng)態(tài)的，換個(gè)書(shū)名也能完美適應(yīng)。

圖片

最后再來(lái)對(duì)比一下，下面哪個(gè)一眼看上去效果最好？

圖片

完整代碼可以查看以下任意鏈接：

  • CSS feather (juejin.cn)[3]
  • CSS feather (codepen.io)[4]
  • CSS feather (runjs.work)[5]

五、總結(jié)一下

以上就是本文全部?jī)?nèi)容了，一個(gè)還不錯(cuò)的繪制小技巧，最后來(lái)回顧一下一些實(shí)現(xiàn)要點(diǎn)。

  • 羽化其實(shí)就是將邊緣變得模糊，在 CSS 中其實(shí)就是創(chuàng)建一個(gè)邊緣模糊的遮罩，也就是需要一種半透明的漸變。
  • 圓形的邊緣很好羽化，因?yàn)閺较驖u變可以直接繪制。
  • 矩形的邊緣就稍微復(fù)雜點(diǎn)，因?yàn)椴荒苤苯油ㄟ^(guò)漸變繪制。
  • 邊緣模糊在 CSS 中很好實(shí)現(xiàn)，用 box-shadow 就行了。
  • 可以通過(guò) SVG foreignObject 將 dom 轉(zhuǎn)換成圖片。
  • SVG 轉(zhuǎn)換成內(nèi)聯(lián)形式，好處是減少資源依賴，轉(zhuǎn)換后仍然保持自適應(yīng)特性。
責(zé)任編輯：武曉燕 來(lái)源： 前端偵探
CSS羽化陰影
相關(guān)推薦

2021-05-19 06:07:21

CSS 斜線效果技巧

2010-09-08 12:49:16

CSS斜線

2021-07-27 07:31:16

CSS 元素切換

2010-09-14 09:18:28

DIVCSS

2010-09-14 12:58:41

DIV+CSS圓角

2010-09-07 14:53:45

Chroma屬性CSS

2021-12-27 07:45:30

CSS 技巧煙霧效果

2021-01-19 12:16:10

CSS前端UI

2010-09-09 11:16:06

CSS交互

2010-09-09 12:49:58

鼠標(biāo)懸停tip效果CSS

2022-07-07 08:43:05

HoudiniAPICSS

2022-03-17 19:29:04

CSS切角自適應(yīng)

2023-05-22 09:10:53

CSSloading 效

2010-09-13 14:09:35

CSS文字

2023-11-22 07:47:34

2024-07-31 20:38:18

2021-09-28 08:26:06

CSS 技巧文字鏤空波浪

2022-06-15 22:15:47

CSS視覺(jué)還原

2023-11-01 08:33:45

CSS動(dòng)畫(huà)效果

2023-06-06 15:38:28

HTMLCSS開(kāi)發(fā)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)