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

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

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

下面這個(gè)Demo是來(lái)自于Codepen上@Kyle Wetton寫(xiě)的一個(gè)效果：

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

是不是很有意思。

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

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

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

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

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

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

除此之外，你還需要會(huì)點(diǎn)扣圖的技巧。不過(guò)這一點(diǎn)，我想對(duì)于前端來(lái)說(shuō)應(yīng)該不是難題。

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

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

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

簡(jiǎn)單的分析一下，你看到的一坨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來(lái)動(dòng)態(tài)更改產(chǎn)品圖片的顏色,希望對(duì)大家有所幫助。