Alright, 各位观众，欢迎来到今天的CSS混色模式专场！今天咱们不讲那些虚头巴脑的概念，直接上手，把multiply、screen和overlay这三个老伙计扒个精光，看看它们到底是怎么在背景和前景之间搞事情的。 第一幕：混色模式是个啥？ 简单来说，混色模式就是告诉浏览器，当两个元素（通常是背景和前景）重叠的时候，它们的颜色该如何互相作用，最终呈现出一个新的颜色。想想PS里的图层混合模式，CSS的混色模式就是它的简化版。 第二幕：multiply – 黑暗降临 multiply（正片叠底）模式就像一个黑暗的滤镜，它会将背景色和前景色对应的 RGB 值相乘，然后除以 255，得到新的颜色。结果总是比原始颜色更暗，因为任何颜色乘以黑色都会变成黑色，乘以白色则保持不变。 公式：结果颜色 = (背景颜色 * 前景颜色) / 255 举个栗子： <!DOCTYPE html> <html> <head> <title>Multiply 混合模式</title> <style> .container { wi …
继续阅读“CSS `blending modes` (混合模式) (`multiply`, `screen`, `overlay`) 在背景与前景中的应用”