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-modehtml文件<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-modecss文件.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的注意事项