Less 颜色混合重叠函数.pdfVIP

Less 颜⾊混合重叠函数 描述 overlay 函数通过组合乘法和屏幕的效果⽣成结果。 它使光通道更轻，暗通道更暗。 结果基于第⼀颜 参数。 参数： color1 ：基 对象，它是决定性颜 ，使得到的颜 更亮或更暗。 color2 ：要叠加的颜 对象。 返回：颜 。 例⼦ 以下⽰例演⽰如何在LESS⽂件中使⽤ overlay 函数： html head link rel=stylesheet href=style.css type=text/css / /head body h2Overlay Function/h2 div class=color p(color ) br #ff6600/p /divbr div class=color2 p(color2) br #0000ff/p /divbr div class=res p(result) br #ff0000/p /div /body /html 接下来，创建⽂件 style .less 。 style.less .color { width: 00px; height: 00px; background-color: #ff6600; } .color2 { width: 00px; height: 00px; background-color: #0000ff; } .res { width: 00px; height: 00px; background-color: overlay(#ff6600, #0000ff); } p{ padding: 30px 0px 0px 25px; } 您可以使⽤以下命令将 style .less 编译为 style .css ： lessc style.less style.css 接下来执⾏上⾯的命令，它将⽤下⾯的代码⾃动创建 style .css ⽂件： style.css .color { width: 00px; height: 00px; background-color: #ff6600; } .color2 { width: 00px; height: 00px; background-color: #0000ff; } .result { width: 00px; height: 00px; background-color: #ff0000; } p { padding: 30px 0px 0px 25px; } 输出 让我们执⾏以下步骤，看看上⾯的代码如何⼯作： 将上述代码保存在 color_blending_overlay.html ⽂件中。 在浏览器中打开此HTML⽂件，将显⽰如下输出。 W3Cschool （ ）最⼤的技术知识分享与学 平台 此篇内容来⾃于 ⽹站⽤户上传并发布。