mix-blend-mode及background-blend-mode实现炫酷的图片样式

在网上看到了有如相机功能的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存在兼容性

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

• 往期好文推荐：

  • 判断iOS和Android及PC端
  • 纯css实现瀑布流（multi-column多列及flex布局）
  • 实现单行及多行文字超出后加省略号
  • 微信小程序之购物车和父子组件传值及calc的注意事项