在網上看到了有如相機功能的mix-blend-mode實現比較好看的圖片樣式，自己也想弄下，在這裡記錄下

1.效果圖

2.mix-blend-mode相關屬性

{
    mix-blend-mode: normal;         // 正常
    mix-blend-mode: multiply;       // 正片疊底
    mix-blend-mode: screen;         // 濾色
    mix-blend-mode: overlay;        // 疊加
    mix-blend-mode: darken;         // 變暗
    mix-blend-mode: lighten;        // 變亮
    mix-blend-mode: color-dodge;    // 顏色減淡
    mix-blend-mode: color-burn;     // 顏色加深
    mix-blend-mode: hard-light;     // 強光
    mix-blend-mode: soft-light;     // 柔光
    mix-blend-mode: difference;     // 差值
    mix-blend-mode: exclusion;      // 排除
    mix-blend-mode: hue;            // 色相
    mix-blend-mode: saturation;     // 飽和度
    mix-blend-mode: color;          // 顏色
    mix-blend-mode: luminosity;     // 亮度

    mix-blend-mode: initial;
    mix-blend-mode: inherit;
    mix-blend-mode: unset;
}
 

3.在css上加mix-blend-mode

• html檔案

<div id="root">
    <select id="select">
        <option value ="normal">normal -- 正常</option>
        <option value ="multiply">multiply -- 正片疊底</option>
        <option value="screen">screen -- 濾色</option>
        <option value="overlay">overlay -- 疊加</option>
        <option value="darken">darken -- 變暗</option>
        <option value="lighten">lighten -- 變亮</option>
        <option value="color-dodge">color-dodge -- 顏色減淡</option>
        <option value="color-burn">color-burn -- 顏色加深</option>
        <option value="hard-light">hard-light -- 強光</option>
        <option value="soft-light">soft-light -- 柔光</option>
        <option value="difference">difference -- 差值</option>
        <option value="exclusion">exclusion -- 排除</option>
        <option value="hue">hue -- 色相</option>
        <option value="saturation">saturation -- 飽和度</option>
        <option value="color">color -- 顏色</option>
        <option value="luminosity">luminosity -- 亮度</option>
    </select>
    <div class="container">
        <div class="item mode1"></div>
        <div class="item mode2"></div>
        <div class="item mode3"></div>
    </div>
</div>
<script>
    (function() {
        let selectElement = document.getElementById('select');
        let item = document.getElementsByClassName('item');
        selectElement.addEventListener('change', function() {
            for(let i = 0; i < item.length; i++) {
                item[i].style.cssText = 'mix-blend-mode:' + selectElement.value;
            }
        });
    })()
</script>
 

• css樣式

.container{
    position: relative;
    margin: 140px auto;
    width: 120px;
    height: 120px;
}
.item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    mix-blend-mode: normal;
}
.mode1{
    transform: translateX(30%);
    background: rgba(255, 0, 255, .8);
}
.mode2{
    transform: translateX(-30%);
    background: rgba(0, 255, 255, .8);
}
.mode3{
    transform: translateY(-50%);
    background: rgba(0, 255, 0, .8);
}
#select{
    position: absolute;
    left: 500px;
    top: 100px;
}
 

4.使用background-blend-mode

• css檔案

.root {
    width: 400px;
    height: 500px;
    margin: 20px auto;
    background: url(../images/22.jpg),
        url(https://user-images.githubusercontent.com/8554143/34369175-c14ae23e-eaf4-11e7-96f1-e146e5e5a96b.jpg);
    background-size: cover;
    /*background-blend-mode: lighten;*/
}
#root{
    position: absolute;
    top: 50px;
    left: 50px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 下拉框包含層 */
#selectedItem{
    width: 240px;
    cursor: pointer;
}
/* 已選中的選項 */
#promptText{
    position: relative;
    padding-left: 10px;
    width: 230px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    background: #fff;
    color: #999;
    font-size: 14px;
}
/* 圖示 */
#arrows{
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
#arrows:focus{
    outline: none;
}
/* 下拉可選項包含層 */
.choiceDescription{
    position: absolute;
    display: none;
    /*overflow: hidden;*/
    margin-top: 2px;
    width: 240px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
    background: #fff;
}
.show{
    display: block;
}
/* 下拉可選項 */
.item{
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    font-size: 15px;
    color: #666;
}
.item:hover, .active{
    color: #fff;
    background: rgba(49, 255, 195, 0.67);
}

• html檔案

<div class="root"></div>
<div id="root">
    <div id="selectedItem">
        <div id="promptText"><span id="spanText">請選擇你喜歡的文字</span><img src="../images/arrowup.png" id="arrows" /></div>
        <ul class="choiceDescription">
            <li class="item">normal--正常</li>
            <li class="item">multiply--正片疊底</li>
            <li class="item">screen--濾色</li>
            <li class="item">overlay--疊加</li>
            <li class="item">darken--變暗</li>
            <li class="item">lighten--變亮</li>
            <li class="item">color-dodge--顏色減淡</li>
            <li class="item">color-burn--顏色加深</li>
            <li class="item">hard-light--強光</li>
            <li class="item">soft-light--柔光</li>
            <li class="item">difference--差值</li>
            <li class="item">exclusion--排除</li>
            <li class="item">hue--色相</li>
            <li class="item">saturation--飽和度</li>
            <li class="item">color--顏色</li>
            <li class="item">luminosity--亮度</li>
        </ul>
    </div>
</div>
<script>
    (function() {
        let rootElement = document.getElementsByClassName('root');
        let choiceDescription = document.getElementsByClassName('choiceDescription')[0];
        let arrows = document.getElementById('arrows');
        /* 用於判斷是否是下拉 */
        let isDown = false;

        let selectedItem = document.getElementById('selectedItem');
        /* 對點選下拉進行監聽 */
        selectedItem.addEventListener('click', function() {
            isDown = !isDown;
            if(isDown) {
                /* 如果是下拉狀態，則顯示下拉的選項，並把圖示顯示為向下的圖示 */
                choiceDescription.className += ' show';
                arrows.src = '../images/arrowdown.png';
            } else {
                choiceDescription.className = 'choiceDescription';
                arrows.src = '../images/arrowup.png';
            }

            /* 對已經選中的選項進行標記 */
            let itemElement = document.getElementsByClassName('item');
            let promptText = document.getElementById('spanText');
            for(let i = 0; i < itemElement.length; i++) {
                itemElement[i].className = 'item';
                if(promptText.innerHTML == itemElement[i].innerHTML) {
                    itemElement[i].className = 'item active';
                }
            }
        });

        choiceDescription.addEventListener('click', function(e) {
            let promptText = document.getElementById('spanText');
            let selectElement = e.target;

            /* 判斷是否點選的是li標籤，防止點選了li標籤以外的空白位置 */
            while(selectElement.tagName !== 'LI') {

                /* 如果點中的是當前容器層 */
                if(selectElement == choiceDescription) {
                    selectElement = null;
                    break;
                }

                /* 若果不是，則再找父級容器 */
                selectElement = selectElement.parentNode;
            }

            /* innerText、innerHTML、value
             * innerText 是指html標籤裡的文字資訊，單純的文字，不會有html標籤，存在相容性
             * innerHTML 是指包含在html標籤裡的所有子元素，包括空格、html標籤
             * value 表單裡的元素屬性值
             * */
            if(selectElement) {
                promptText.innerHTML = e.target.innerHTML;
                rootElement[0].style.cssText = 'background-blend-mode:' + e.target.innerHTML.split('--')[0];
            }
        });
    })()
</script>

5.注意點

• mix-blend-mode及background-blend-mode存在相容性