共计 5701 个字符，预计需要花费 15 分钟才能阅读完成。
在网上看到了有如相机功能的 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 的注意事项
