举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > 柔和颜色rgb Less 颜色混合柔光函数

柔和颜色rgb Less 颜色混合柔光函数

2023-04-21 06:31 Less教程

柔和颜色rgb Less 颜色混合柔光函数

柔和颜色rgb

柔和颜色rgb是一种非常流行的颜色系统,它可以用来表示任何颜色。它是一个三原色混合模型,由红、绿、蓝三个基本颜色的不同比例来表示。

柔和颜色rgb的优势在于它可以表示出大量的颜色,而且这些颜色都是真实存在的,而不是人工制造出来的。此外,它还可以用来表示几乎所有的图形图像,包括文字、图片、动画、3D图形等。

RGB(255, 0, 0) // 纯红 
RGB(0, 255, 0) // 纯绿 
RGB(0, 0, 255) // 纯蓝 
RGB(255, 255, 0) // 黄 
RGB(255, 0, 255) // 紫 
RGB(0, 255, 255) // 青 
RGB(128, 128, 128) // 灰 

Less 颜色混合柔光函数

描述

Softlight函数的工作方式类似于overlay函数,但它仅使用颜色的一部分,其中柔和地突出显示其他颜色。


参数:

  • color1:一个颜色对象到柔光另一个。

  • color2:必须柔和变亮的颜色对象。

返回:颜色。


例子

下面的示例演示了在LESS文件中使用 softlight 功能:

<html>
<head>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h2>Softlight Function</h2>
<div class="color1">
  <p>(color1) <br> #ff6600</p>
</div><br>
<div class="color2">
  <p>(color2) <br> #0000ff</p>
</div><br>
<div class="res">
  <p>(result) <br> #ff2900</p>
</div>
</body>
</html>


接下来,创建文件 style.less 。

style.less

.color1 {
    width: 100px;
    height: 100px;
    background-color: #ff6600;
}
.color2 {
    width: 100px;
    height: 100px;
    background-color: #0000ff;
}
.res {
    width: 100px;
    height: 100px;
    background-color: softlight(#ff6600, #0000ff);
}
p{
 padding: 30px 0px 0px 25px;
}


您可以使用以下命令将 style.less 编译为 style.css :

lessc style.less style.css


接下来执行上面的命令,它将用下面的代码自动创建 style.css 文件:

style.css

.color1 {
  width: 100px;
  height: 100px;
  background-color: #ff6600;
}
.color2 {
  width: 100px;
  height: 100px;
  background-color: #0000ff;
}
.result {
  width: 100px;
  height: 100px;
  background-color: #ff2900;
}
p {
  padding: 30px 0px 0px 25px;
}

输出

让我们执行以下步骤,看看上面的代码如何工作:

  • 将上述代码保存在 color_blending_softlight.html 文件中。

  • 在浏览器中打开此HTML文件,将显示如下输出。


输出

阅读全文
以上是鳄鱼CMS为你收集整理的柔和颜色rgb Less 颜色混合柔光函数全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  • layui浏览器兼容 Less 浏览器支持

    layui浏览器兼容 Less 浏览器支持

    2023-06-08 Less教程

    LESS是跨浏览器友好的,支持诸如Google Chrome,Mozilla Firefox,Safari和Internet Explorer等现代浏览器,并允许重用CSS元素并...

  •  Less 变量

    Less 变量

    2023-03-29 Less教程

    LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。LESS中声明变量的格式为“@变量名:变量值”。下表详细说明了使用LESS...

  •  Less CSS Guards

    Less CSS Guards

    2023-04-15 Less教程

    描述Guard用于匹配表达式上的简单值或参数个数。 它应用于CSS选择器。 它是用于声明mixin并立即调用它的语法。 要成功地引出 if ...

  • css边框大小 CSS3 框大小

    css边框大小 CSS3 框大小

    2023-04-06 CSS3教程

    CSS3 框大小#div1 {width: 300px;height: 100px;border: 1px solid blue;box-sizing: content-box;}#div2 {width: 300px;height:...

  • css3动画属性有哪些 CSS3 动画

    css3动画属性有哪些 CSS3 动画

    2023-03-31 CSS3教程

    #animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-si...

© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们