先不說技術，看實現的效果， 與原圖（左圖）相比，‘燈光’ 照射（右圖）下的小姐姐是不是更有魅力了！！
那么下面就說說大家關心的技術實現過程。
其實這是我在學習css屬性 mix-blend-mode 時想出的圖片實現方式，下面先介紹一下mix-blend-mode這個屬性，”blend-mode”就是混合模式的意思，該CSS屬性作用是讓元素內容和這個元素的背景以及下面的元素發生“混合”。
屬性取值及其作用效果如下：
1 mix-blend-mode: normal; //正常 2 mix-blend-mode: multiply; //正片疊底 3 mix-blend-mode: screen; //濾色 4 mix-blend-mode: overlay; //疊加 5 mix-blend-mode: darken; //變暗 6 mix-blend-mode: lighten; //變亮 7 mix-blend-mode: color-dodge; //顏色減淡 8 mix-blend-mode: color-burn; //顏色加深 9 mix-blend-mode: hard-light; //強光 10 mix-blend-mode: soft-light; //柔光 11 mix-blend-mode: difference; //差值 12 mix-blend-mode: exclusion; //排除 13 mix-blend-mode: hue; //色相 14 mix-blend-mode: saturation; //飽和度 15 mix-blend-mode: color; //顏色 16 mix-blend-mode: luminosity; //亮度 17 18 mix-blend-mode: initial; //初始 19 mix-blend-mode: inherit; //繼承 20 mix-blend-mode: unset; //復原
而此次該效果的實現是由上面左圖與下圖（背景為透明的）一塊合成的。
所以，這里用到的 mix-blend-mode 值是overlay。代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style> 8 *{padding: 0;margin: 0;} 9 .beauty{ 10 height: 1000px; 11 width: 667px; 12 background-image: url(./beauty.jpg); 13 border-radius: 100%; 14 position: relative; 15 transform: scale(0.5); 16 } 17 .beauty img{ 18 height: 200%; 19 width: 200%; 20 mix-blend-mode: overlay; 21 position: absolute; 22 top:-90%; 23 left:-105%; 24 } 25 </style> 26 <body> 27 <div class='beauty'> 28 <img src="./shine.png" alt=""> 29 </div> 30 </body> 31 <script> 32 </script> 33 </html>
讓兩圖片重疊，然后設置混合方式是重疊，就這么簡單！哈哈！
想要原素材的同學可以留下郵箱，我會把發給你