當(dāng)前位置：首頁 > 科技 > 軟件

CSS 和 SVG 實現(xiàn)彩色圖片陰影

來源：責(zé)編：時間：2024-02-01 12:52:20 258觀看

導(dǎo)讀在平時開發(fā)中，有時候會碰到這樣的彩色陰影，效果如下：是不是非常有質(zhì)感？下面分別介紹 CSS 和 SVG 兩種實現(xiàn)方式，一起看看吧！一、實現(xiàn)原理從設(shè)計上看，其實原理很簡單，一張原圖和一張模糊的圖，疊加在一起就行了，示意如下：那么具體如

在平時開發(fā)中，有時候會碰到這樣的彩色陰影，效果如下：

是不是非常有質(zhì)感？下面分別介紹 CSS 和 SVG 兩種實現(xiàn)方式，一起看看吧！

一、實現(xiàn)原理

從設(shè)計上看，其實原理很簡單，一張原圖和一張模糊的圖，疊加在一起就行了，示意如下：

那么具體如何實現(xiàn)呢？接著往下看。

二、CSS 濾鏡

首先，單純的 CSS并不能直接做出這種效果，畢竟無法生成一份相同的圖片，因此，我們需要手動創(chuàng)建一個相同的圖層。

假設(shè)HTML如下：

<div class="wrap">   <img class="cover" src="https://bookcover.yuewen.com/qdbimg/349573/1036370336/180.webp"></div>

為了節(jié)省 dom，我們可以通過偽元素的方式來生成這個圖片，關(guān)鍵代碼如下：

.wrap{  position: relative;  /**/}.wrap::before{  content:'';  position: absolute;  background: url("https://bookcover.yuewen.com/qdbimg/349573/1036370336/180.webp");  transform: translate(10px,10px);}

稍微給點偏移，這樣得到了兩層圖片。

然后給這個偽元素設(shè)置模糊濾鏡就行了。

.wrap::before{  /**/  filter: blur(12px);}

這樣就實現(xiàn)了文章開頭效果。

是不是很簡單呢？

不過實際中可以采用 CSS變量的方式，將需要重復(fù)的圖片抽離出來。

<div class="wrap" style="--bg: url('https://bookcover.yuewen.com/qdbimg/349573/1036370336/180.webp')">  <img class="cover" src="https://bookcover.yuewen.com/qdbimg/349573/1036370336/180.webp"></div>

然后CSS就可以保持統(tǒng)一了。

.wrap::before{  /**/  background: var(--bg);}

三、SVG濾鏡

有沒有發(fā)現(xiàn) 上面這種方式需要手動去創(chuàng)建一個一模一樣的圖層有些多余呢？

確實是這樣，CSS 目前還無法直接復(fù)制一個圖層。

Firefox 中有個element()方法可以根據(jù)dom生成一份完全相同的圖層，但是僅僅 Firefox 支持：https://developer.mozilla.org/en-US/docs/Web/CSS/element。

那么，還有其他方式嗎？

當(dāng)然也是有了，那就是 SVG濾鏡！

和前面的思路其實是一致的，先模糊圖層，然后偏移一下，用SVG實現(xiàn)就是。

<svg width="0" height="0">  <filter id="natural-shadow-filter">    <feGaussianBlur stdDeviation="12" />    <feOffset dx="10" dy="10" />    <feMerge>      <feMergeNode />      <feMergeNode in="SourceGraphic" />    </feMerge>  </filter></svg>

似乎有些看不懂？沒關(guān)系，我們一步步分析。

首先filter就濾鏡的意思，表示整個就是定義了一個濾鏡，后面可以給 CSS 直接使用。

接著，feGaussianBlur就是高斯模糊，stdDeviation表示模糊的范圍。

然后，feOffset表示偏移，dx和dy分別是水平和垂直方向的位移。

最后是一個feMerge標(biāo)簽，這個表示合并，也就是將多個濾鏡組合起來，里面的feMergeNode表示每一步濾鏡的結(jié)果。這里有兩個feMergeNode，第一個就是前面濾鏡的最終結(jié)果，也就是「模糊」+「偏移」后的效果，第二個feMergeNode有一個in參數(shù)，表示輸入，這里設(shè)置的是SourceGraphic，表示原始圖像，也就是處理之前的原圖。這里的疊加順序是后來居上，也就是原圖放在模糊圖之上。

示意效果如下：

最后，我們在CSS中直接通過 id 引入的方式使用這個濾鏡就行了。

.wrap{  filter: url("#natural-shadow-filter");}

效果如下，和 CSS基本一致。

我們還可以多試幾種其他圖片，下面是 CSS 和 SVG 兩種實現(xiàn)的效果對比。

你可以查看以下鏈接

CSS & SVG color shadow(code.juejin)[1]
CSS & SVG color shadow(codepen.io)[2]

四、總結(jié)一下

以上就是本文的全部內(nèi)容了，主要介紹了 CSS 和 SVG 兩種不同的實現(xiàn)方式，下面總結(jié)一下

彩色陰影其實原理很簡單，一張原圖和一張模糊的圖，疊加在一起就行了。
CSS無法直接創(chuàng)建一個完全相同的圖層，需要手動去創(chuàng)建。
手動去創(chuàng)建一個一模一樣的圖層有些多余，而SVG可以自動生成多份。
SVG可以將多個效果通過feMerge進(jìn)行疊加，順序是后來居上，SourceGraphic表示原始圖像。
CSS可以通過url(#id)的方式引入SVG濾鏡。

當(dāng)然，SVG的潛力遠(yuǎn)不僅如此，在圖像處理方面，SVG有著無可比擬的優(yōu)勢，CSS 濾鏡可以稱之為“殘血版”濾鏡，很多效果還是需要SVG出馬，以后還會介紹更多實用場景。

[1]CSS & SVG color shadow (code.juejin)： https://code.juejin.cn/pen/7328684301011124260。

[2]CSS & SVG color shadow (codepen.io)： https://code.juejin.cn/pen/7328684301011124260。

本文鏈接：http://www.www897cc.com/showinfo-26-70482-0.htmlCSS 和 SVG 實現(xiàn)彩色圖片陰影

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：免費用JetBrains全家桶的門檻變高了，這個條件必須滿足

下一篇：故障現(xiàn)場 | 這個死鎖出奇的詭異

標(biāo)簽：

熱門焦點

跑分安卓第一！Redmi K60至尊版8月發(fā)布！盧偉冰：目標(biāo)年度性能之王

8月5日消息，Redmi K60至尊版將于8月發(fā)布，在此前舉行的戰(zhàn)略發(fā)布會上，官方該機將搭載搭載天璣9200+處理器，安兔兔V10跑分超177萬分，是目前安卓陣營最高的分?jǐn)?shù)
線程通訊的三種方法！通俗易懂

線程通信是指多個線程之間通過某種機制進(jìn)行協(xié)調(diào)和交互，例如，線程等待和通知機制就是線程通訊的主要手段之一。在 Java 中，線程等待和通知的實現(xiàn)手段有以下幾種方式：Object 類下
網(wǎng)紅炒股不為了賺錢，那就是耍流氓！

來源：首席商業(yè)評論6月26日高調(diào)宣布入市，網(wǎng)絡(luò)名嘴大v胡錫進(jìn)居然進(jìn)軍了股市。在一次財經(jīng)媒體峰會上，幾個財經(jīng)圈媒體大佬就“胡錫進(jìn)炒股是否知道認(rèn)真報道”展開討論。有
東方甄選單飛：有些鳥注定是關(guān)不住的

作者：彭寬鴻來源：華爾街科技眼&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;東方甄選創(chuàng)始人俞敏洪帶隊的“7天甘肅行”直播活動已在近日順利收官。成立后一
攜眾多高端產(chǎn)品亮相ChinaJoy，小米帶來一場科技與人文的視聽盛宴

7月28日，全球數(shù)字娛樂領(lǐng)域最具知名度與影響力的年度盛會中國國際數(shù)碼互動娛樂展覽會（簡稱ChinaJoy）在上海新國際博覽中心盛大開幕。作為全球領(lǐng)先的科
三星Galaxy Z Fold5今日亮相：厚度縮減但仍略顯厚重

據(jù)官方此前宣布，三星將于7月26日也就是今天在韓國首爾舉辦Unpacked活動，屆時將帶來帶來包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
引領(lǐng)旗艦級影像能力向中端機普及 OPPO K11 系列發(fā)布 1799 元起

7月25日，OPPO正式發(fā)布K系列新品—— OPPO K11 。此次 K11 在中端手機市場長期被忽視的影像板塊發(fā)力，突破性地搭載索尼 IMX890 旗艦大底主攝，支持 OIS
最薄的14英寸游戲筆記本電腦 Alienware X14已可以購買

2022年1月份在國際消費電子展(CES2022)上首次亮相的Alienware新品——Alienware X14現(xiàn)在已經(jīng)可以購買了，這款筆記本電腦被譽為世界上最薄的 14 英寸游戲筆
榮耀Magic4 至臻版首創(chuàng)智慧隱私通話強勁影音系統(tǒng)

2022年第一季度臨近尾聲，在該季度內(nèi)，許多品牌陸續(xù)發(fā)布自己的最新產(chǎn)品，讓大家從全新的角度來了解當(dāng)今的手機技術(shù)。手機是電子設(shè)備中，更新迭代十分迅速的一款產(chǎn)品，基

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

CSS 和 SVG 實現(xiàn)彩色圖片陰影

一、實現(xiàn)原理

二、CSS 濾鏡

三、SVG濾鏡

四、總結(jié)一下

跑分安卓第一！Redmi K60至尊版8月發(fā)布！盧偉冰：目標(biāo)年度性能之王

線程通訊的三種方法！通俗易懂

網(wǎng)紅炒股不為了賺錢，那就是耍流氓！

東方甄選單飛：有些鳥注定是關(guān)不住的

攜眾多高端產(chǎn)品亮相ChinaJoy，小米帶來一場科技與人文的視聽盛宴

三星Galaxy Z Fold5今日亮相：厚度縮減但仍略顯厚重

引領(lǐng)旗艦級影像能力向中端機普及 OPPO K11 系列發(fā)布 1799 元起

最薄的14英寸游戲筆記本電腦 Alienware X14已可以購買

榮耀Magic4 至臻版首創(chuàng)智慧隱私通話強勁影音系統(tǒng)

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊

CSS 和 SVG 實現(xiàn)彩色圖片陰影

一、實現(xiàn)原理

二、CSS 濾鏡

三、SVG濾鏡

四、總結(jié)一下

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊

二、CSS 濾鏡

四、總結(jié)一下