當麻許的超技八

最近在處理一些前端的東西，遇到一個問題，就是假設設計在一個 <div> 有 background-image 是可以讓客戶更換的

但是，在這 <div>  上面有文字，文字有顏色，如果可以設定一張純白，純嘿，或是花花綠綠的圖該怎麼辦 ?

1. 讓客戶自訂文字顏色，我想這是大部分會用的方法，簡單粗暴，在後台設定直接讓客戶選擇文字顏色，但是通常客戶是麻瓜

2.善用遮罩，在文字跟 <div> 中間再加上一層底色，這樣凸顯文字，就可以不用管圖片，而且有質感，我想大部分會用這種解法，從設計去解決問題

3. 今天提供第三種作法，但是，這也不是完美，但是堪用，如果條件許可，就用前兩個方法，首先我找到一個  js 的  套件 - background-color-theif

他主要目的，就是可以將一張圖片，在前端概算出他的顏色

程式碼也很簡單，但是因為我是在 div 裡面的 image 所以這時候我範例就是得生出一個 img 的 element 然後，並將 src 設定成該 div 的 backround-image 

在送入這 library ，之後回拿到一個顏色，此時將 要顯示的文字顯示成 該顏色，在使用 CSS  filter:invert(100%) 就可以了，

Source Code:

Result:


這邊做了一些實驗，因為他是概算，所以在一些時候可能會成立，但是如果你的顏色真的是五顏六色，可能還是會不準像是測試圖片中的測試2一樣

reference:
https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

https://github.com/SodhanaLibrary/Background-Color-Thief