使用CSS混合模式和SVG來動態(tài)更改產(chǎn)品圖片的顏色

2019-10-16 22:26:29 來源：互聯(lián)網(wǎng)作者：佚名 人氣： 次閱讀 485 條評論

文章主要介紹了使用CSS混合模式和SVG來動態(tài)更改產(chǎn)品圖片的顏色,需要的朋友可以參考下。前兩天在Codepen看到了@Kyle Wetton寫的一個示例， 使用CSS混合模式和SVG來改變沙發(fā)的...

文章主要介紹了使用CSS混合模式和SVG來動態(tài)更改產(chǎn)品圖片的顏色,需要的朋友可以參考下。

前兩天在Codepen看到了@Kyle Wetton寫的一個示例， 使用CSS混合模式和SVG來改變沙發(fā)的顏色 。非常有意思的一案例。這讓我想起了在實際的一些業(yè)務(wù)場景中的運用，比如說一些美妝的應(yīng)用中，就有類似的場景。不知道大家是否想深入的了解如何實現(xiàn)這樣的效果？如果是，那么請繼續(xù)往下閱讀。

使用CSS混合模式和SVG來改變沙發(fā)顏色案例

下面這個Demo是來自于Codepen上@Kyle Wetton寫的一個效果：

嘗試著改為顏色，你會看到不同的沙發(fā)顏色：

是不是很有意思。

其實在實際場景中也有類似的一些效果，比如一些美妝應(yīng)用：

如果你想了解其中的實現(xiàn)原理或效果，請繼續(xù)往下閱讀。

你需要具備的基礎(chǔ)知識

如果希望順利的實現(xiàn)上面示例的效果，那么需要具備一點點基礎(chǔ)知識。比如CSS的混合模、 SVG 等。

使用CSS的混合模式不同的屬性值，我們可以非常輕意的改變一張圖片的效果：

CSS混合模式還能實現(xiàn)很多其他的效果，這里就不闡述了。

除此之外，你還需要會點扣圖的技巧。不過這一點，我想對于前端來說應(yīng)該不是難題。

如何實現(xiàn)給沙發(fā)換膚

接下來，我們就實戰(zhàn)一下，先來分析一下@Kyle Wetton的案例。該案例非常簡單，在HTML中有三個部分：

  • 有一坨SVG代碼，看上去密密麻麻，對于不了解SVG的同學肯定會帶來一種恐懼感（親，莫慌）
  • 有一張圖片
  • 有幾個控件，可以讓用戶選擇顏色

簡單的分析一下，你看到的一坨SVG代碼：

<svg id="js-couch" class="couch__overlay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="1000" height="394">
    <defs>
        <path d="M996.35 77.55q-1.85-1.95-8.65-3.75l-62.4-17.1q-9.3-2.75-12.15-2.5-1.8.15-2

總結(jié)

以上所述是小編給大家介紹的使用CSS混合模式和SVG來動態(tài)更改產(chǎn)品圖片的顏色,希望對大家有所幫助。