廊坊市建设局网站,品牌推广手段,个人网站设计的意义,ppt设计培训班CSS常用知识碎片#xff08;八#xff09;
CSS混合模式
background-blend-mode 属性用于混合元素背景图案、渐变和颜色#xff1b;mix-blend-mode 属性用于元素与元素之间的混合#xff1b;isolation 属性用在祖先元素上#xff0c;限制mix-blend-mode 属性设置的混合模…CSS常用知识碎片八
CSS混合模式
background-blend-mode 属性用于混合元素背景图案、渐变和颜色mix-blend-mode 属性用于元素与元素之间的混合isolation 属性用在祖先元素上限制mix-blend-mode 属性设置的混合模式的应用范围。
mix-blend-mode:multiply
值multiply的混合效果是正片叠底最终效果表现的色值的计算公式是C A * B / 255
mix-blend-mode:screen
值screen的混合效果是滤色最终效果的色值的计算公式是C 255 - (255 - A)(255 - B) / 255
mix-blend-mode:overlay 值overlay的混合效果是叠加最终效果的色值的计算公式是 当A 128 时C A * B / 128当A 128 时C 255 - (255 - A)(255 - B) / 128 利用叠加实现文字水印
body
h4文字水印/h4
div classboximg src/images/test.jpg width256
/div
/body
style
.box {position: relative;
}
.box::before {content: 水印文字;position: absolute;mix-blend-mode: overlay;text-shadow: 10ch 2em, -10ch 2em, 10ch -2em, -10ch -2em, 0 -5em, 0 5em;transform: rotate(-30deg);left: calc(50% - 5ch); top: 90px;
}
/style利用叠加实现文字高亮
body
h4颜色叠加适合浅色/h4
pinput typesearch placeholder输入内容回车搜索/p
p idtarget可以在上面的输入框中输入任意这段内容中出现的文字或者单词在输入内容并按回车键确认后就会看到文字有高亮显示效果。但是这种高亮显示效果不是通过包裹标签元素实现的而是将色块直接覆盖在文字上面然后通过叠加这种混合模式实现的。/p
/body
script
var eleSearch document.querySelector(input[typesearch]);
var eleTraget document.querySelector(#target);eleSearch.addEventListener(input, function () {var text eleTraget.textContent;[].slice.call(document.querySelectorAll(ui-overlay)).forEach(function (overlay) {overlay.remove();});// 匹配处理var value this.value.trim();var length value.length;if (!length) {return;}var arrMatchs text.split(value);if (arrMatchs.length 1) {var start 0;arrMatchs.forEach(function (parts, index) {if (index arrMatchs.length - 1) {return;}var range document.createRange();start parts.length;range.setStart(eleTraget.firstChild, start);range.setEnd(eleTraget.firstChild, start length);var bound range.getBoundingClientRect();var eleOverlay document.createElement(ui-overlay);document.body.appendChild(eleOverlay);eleOverlay.style.left bound.left px;eleOverlay.style.top (bound.top window.pageYOffset) px;eleOverlay.style.width bound.width px;eleOverlay.style.height bound.height px;start length;});}
});
/script
style
ui-overlay {position: absolute;background: red;mix-blend-mode: overlay;z-index: 9;
}p {color: gray;
}
/stylemix-blend-mode:darken
值darken的混合效果是变暗表示将两种颜色的RGB通道值依次进行比较哪个色值小就使用哪个色值。最终效果的色值的计算公式是C min(A, B)
mix-blend-mode:lighten
值lighten的混合效果是变亮表示将两个颜色的RGB通道值依次进行比较哪个色值大就使用哪个色值。最终效果的色值的计算公式是C max(A, B)
mix-blend-mode:color-dodge
值color-dodge的混合效果是颜色变淡最终效果的色值的计算公式是C A A * B / (255 - B)
mix-blend-mode:color-burn
值color-burn的混合效果是颜色加深最终效果的色值的计算公式是C A - (255 - A)(255 - B) / B
mix-blend-mode:hard-light
值hard-light的混合效果是强光就好像耀眼的聚光灯照射过来表现为图像亮的地方更亮暗的地方更暗。最终效果的色值的计算公式如下所示 当 B 128 时C A * B / 128当 B 128 时C 255 - (255 - A)(255 - B) / 128
mix-blend-mode:soft-light
值soft-light的混合效果是柔光就好像发散的光源四处弥漫它的表现效果和hard-light有类似之处只是表现没有hard-light那么强烈。 当 B 128 时C (A * B / 128) (A / 255)^2 * (255 - 2 * B)当 B 128 时C 255 - (255 - A)(255 - B) / 128
mix-blend-mode:difference
值difference的混合效果是差值最终颜色的色值是用较浅颜色的色值减去较深颜色的色值的结果计算公式是C | A - B |
mix-blend-mode:exclusion
值exclusion的混合效果是排除最终的混合效果和difference模式是类似的区别在于exclusion的对比度要更低一些。最终效果的色值的计算公式是C A B - A * B / 128
mix-blend-mode:hue
值hue表示色调混合作用是将颜色混合使用底层元素的亮度和饱和度以及上层元素的色调。
mix-blend-mode:saturation
值saturation表示饱和度混合混合后的颜色保留底图的亮度和色调并使用顶图的饱和度。
mix-blend-mode:color
值color表示颜色混合混合后的颜色保留底图的亮度并使用顶图的色调和饱和度。
mix-blend-mode:luminosity
值luminosity表示亮度混合混合后的颜色保留底图的色调和饱和度并使用顶图的亮度效果和color模式正好是相反的。
滤镜和混合模式的化合反应
使用白天素材模拟夜晚
.night {width: 256px; height: 256px;background: rgba(0,40,140,.6) url(./house-bed.jpg);background-size: 100%;background-blend-mode: darken;filter: brightness(80%) grayscale(20%) contrast(1.2);
}照片美化处理
._1977 {position: relative;/* 应用滤镜 */filter: contrast(1.1) brightness(1.1) saturate(1.3);
}
._1977:after {content: ;height: 100%; width: 100%;position: absolute;left: 0; top: 0;pointer-events: none;background: rgba(243,106,188,.3);/* 应用混合模式 */mix-blend-mode: screen;
}照片风格化处理
.sketch {width: 256px; height: 171px;background: url(10.jpg) -2px -2px, url(10.jpg);background-size: 258px 173px;background-blend-mode: difference;filter: brightness(3) invert(1) grayscale(1);
}background-blend-mode 提升背景重叠的颜色丰富性
.pattern {width: 300px; height: 180px;--gradient: transparent 20px, lightcoral 0 40px, transparent 0 60px;background: repeating-linear-gradient(var(--gradient)),repeating-linear-gradient(90deg, var(--gradient)), floralwhite;/* 应用正片叠底混合模式 */background-blend-mode: multiply;
}
