Less Mix混合两种颜色以及不透明度.pdfVIP

Less Mix混合两种颜⾊以及不透明度 描述 它⽤于混合两种颜⾊以及不透明度。 它有以下参数： color1 ：它代表⼀个颜⾊对象。 color2 ：它代表⼀个颜⾊对象。 weight ：这是⼀个可选参数 通过在两种颜⾊之间提供百分⽐平衡点来指定元 素的权重。 例⼦ 下⾯的例⼦演⽰了在LESS⽂件中使⽤混合颜⾊操作： html head titleMix/title link rel=stylesheet type=text/css href=style.css/ /head body h2Example of Mix Color Operation/h2 di class=myclass pMixed color :br#b0897d/p /di /body /html 接下来 创建⽂件 style .less 。 style.less .myclass{ height:100px; width:100px; padding: 30px 0px 0px 25px; background-color: mix(#b361b1, #acb148, 50%); color:white; } 您可以使⽤以下命令将 style.less 编译为 style.css ： lessc style.less style.css 接下来执⾏上⾯的命令 它将⽤下⾯的代码⾃动创建 style.css ⽂件： style.css .myclass { height: 100px; width: 100px; padding: 30px 0px 0px 25px; background-color: #b0897d; color: white; } 输出 让我们执⾏以下步骤 看看上⾯的代码如何⼯作： 将上⾯的html代码保存在 mix.html ⽂件中。 在浏览器中打开此HTML⽂件 将显⽰如下输出。 W3Cschool （ ）最⼤的技术知识分享与学 平台 此篇内容来⾃于 ⽹站⽤户上传并发布。