CSS3的颜色函数: hsl() 和 hsla() 函数

1. hsl() 函数使用色相、饱和度、亮度来定义颜色。
HSL 即:色相(Hue)、饱和度(Saturation)、亮度(Lightness)。
hue-色相    定义色相(0到360)-0(或360)为红色,120为绿色,240为蓝色
saturation-饱和度    定义饱和度;0%为灰色,100%全白
lightness-亮度    定义亮度0%为暗,50%为普通,100%为白

生成一个互补色:
假如你的网站LOGO是橙色的,它对应的HSL颜色值为:hsl(30,90%,29%),互补色就是色调值增加180度,得到的HSL颜色:hsl(210,90%,29%)

2. hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
HSLA 即:色相、饱和度、亮度、透明度(英语:Hue, Saturation, Lightness, Alpha )。
色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。
饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取 0-100% 的数值。
亮度(L) 取 0-100%,增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。
透明度(A) 取值 0~1 之间, 代表透明度。0透完全明, 1完全不透明。

其实HSLA() 和 HSL()函数用法基本一致,只不过在HSL()的基础上添加一个透明效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/706900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频mov如何转换成mp4?五分钟学会4种方法

在今天的数字时代,我们不可避免地需要处理各种视频文件格式。MOV格式是由苹果公司开发的一种常见视频格式,而MP4格式则是更为通用和广泛支持的视频格式。 因此,当我们需要在不同设备或平台上播放或分享视频时,可能需要将MOV格式的…

Eclipse是如何创建web project项目的?

前面几篇描述先后描述了tomcat的目录结构和访问机制,以及Eclipse的项目类型和怎么调用jar包,还有java的main函数等,这些是一些基础问题,基础高清出来才更容易搞清楚后面要说的东西,也就是需求带动学习,后面…

Unity开发一个FPS游戏

在之前的文章Unity 3D Input System的使用-CSDN博客中,我介绍了如何用Input System来实现一个FPS游戏的移动控制,这里将进一步完善这个游戏。 以下是游戏的演示效果: fps_demo 添加武器模型 首先是增加主角玩家的武器,我们可以在网上搜索到很多免费的3D资源,例如在以下网…

12年高级工程师的“飞升之路”,redis和rabbitmq面试题

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

Mybatis学习笔记:缓存(未完成)

本文是自己的学习笔记,主要参考以下资料 - 马士兵教育 1、缓存概念2、二级缓存Encache集成2.1、导入依赖2.2、 1、缓存概念 缓存是针对一些大量的重复查询,将查询结果存到内存中,减少数据库的负担。 Mybatis的缓存有三个级别。 类别说明一…

STM32 +合宙1.54“ 电子墨水屏(e-paper)驱动显示示例

STM32 合宙1.54“ 电子墨水屏(e-paper)驱动显示示例 📍相关篇《Arduino框架下ESP32/ESP8266合宙1.54“ 电子墨水屏(e-paper)驱动显示示例》🔖程序是从GooDisplay品牌和微雪电子下同型号规格墨水屏的示例程序…

【C#】忽略大小的替换字符串

结果 代码 string a"aAAAAAAaBBaaCC"; string b Strings.Replace(a, "a", "D", 1, -1, CompareMethod.Text);

php基础学习之错误处理(其一)

一,错误处理的概念 错误处理指的是系统(或者用户)在执行某些代码的时候,发现有错误,就会通过错误处理的形式告知程序员,俗称报错 二,错误分类 语法错误:书写的代码不符合 PHP 的语法规范,语法错…

策略分析:Atlassian Server版停止支持,Server版用户应该转向数据中心版本还是云版?

自2024年2月15日起,Atlassian将终止对Server产品提供支持。此政策并非突然之举,早在2021年,Atlassian就停售了Server产品的许可。对于国内用户而言,这一决定带来了巨大的影响,许多企业在得知消息后就开始积极准备迁移&…

npm install webpack 下载失败

1.可以换成国内镜像 使用淘宝npm镜像 npm install -g cnpm --registryhttps://registry.npm.taobao.org 在黑窗口执行这个语句 等执行完后,就可以通过cnpm 来安装我们的webpack, cnpm install webpack3.6.0 -g2. npm install certificate has expired…

编程笔记 html5cssjs 092 JavaScript 表单控件

编程笔记 html5&css&js 092 JavaScript 表单控件 一、常见的表单控件二、JavaScript在表单控件中的应用:三、获取单选按钮和复选框的值获取单选按钮的值:获取复选框的值: 四、应用示例小结 表单控件是HTML中的核心元素,用…

力扣刷题:383.赎金信

题目: 给你两个字符串:ransomNote 和 magazine ,判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以,返回 true ;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1&…

mac电脑监控软件哪个好

在Mac电脑使用日益普及的今天,企业对于Mac终端的安全管理需求也日益增长。Mac电脑监控软件作为一种有效的管理工具,能够帮助企业提高数据安全性和员工工作效率。 在众多Mac电脑监控软件中,域智盾软件以其卓越的功能和性能脱颖而出&#xff0c…

3D工业相机及品牌集合

3D相机可以获取物理世界的空间信息,即立体三维的物理信息,不仅可以拍摄到场景的二维图像,而且能获取物体之间的位置关系,再经过进一步深化处理,还能完成三维建模等应用。 3D相机三种方案 1、结构光 通常采用特定波长…

CentOS Nmap 用法

Nmap是一款开源的网络扫描工具,被广泛应用于网络管理、安全审计和漏洞扫描等领域。它支持多种扫描模式,包括TCP、UDP、SYN和ACK等,可以对目标主机进行端口扫描、操作系统检测、服务和版本识别、漏洞扫描等操作。 此外,Nmap还提供…

R语言数学建模(一)—— 基础知识

R语言数学建模(一)—— 基础知识 文章目录 R语言数学建模(一)—— 基础知识前言一、建模软件1.1 软件建模的基础1.2 模型的分类1.3 不同类型模型间的联系1.4 一些术语1.5 建模如何适应数据分析过程 二、Tidyverse基础2.1 tidyvers…

面试数据库篇(mysql)- 02定位慢查询和分析

定位慢查询 聚合查询多表查询表数据量过大查询深度分页查询表象:页面加载过慢、接口压测响应时间过长(超过1s) 方案一:开源工具 调试工具:Arthas 运维工具:Prometheus 、Skywalking 方案二:MySQL自带慢日志 慢查询日志记录了所有执行时间超过指定参数(long_query_tim…

实现前后端分离架构:优势与劣势

目录 引言 什么是前后端分离架构? 如何实现前后端分离架构? 1. 设计接口 2. 前端开发 3. 后端开发 4. 数据库设计 5. 接口对接与测试 6. 部署与维护 前后端分离架构的优势 前后端分离架构的劣势 结论 引言 在现代Web开发中,前后端…

从零学算法371

371.给你两个整数 a 和 b ,不使用 运算符 和 - ​​​​​​​,计算并返回两整数之和。 示例 1: 输入:a 1, b 2 输出:3 示例 2: 输入:a 2, b 3 输出:5 提示: -1000 …

网络安全之安全事件监测

随着人们对技术和智能互联网设备依赖程度的提高,网络安全的重要性也在不断提升。因此,我们需要不断加强网络安全意识和措施,确保网络环境的安全和稳定。 网络安全的重要性包含以下几点: 1、保护数据安全:数据是组织和…