css中 hsl() 的用法

好的 👍 我来详细介绍一下 CSS hsl() 的用法。


1. 基本语法

color: hsl(hue, saturation, lightness);
  • hue(色相)

    • 取值范围:0 ~ 360(角度值,代表色环的角度)
    • 0 或 360 → 红色
    • 120 → 绿色
    • 240 → 蓝色
    • 其他角度就是这三色之间的过渡
  • saturation(饱和度)

    • 取值范围:0% ~ 100%
    • 0% = 灰色(没有颜色)
    • 100% = 最纯的颜色
  • lightness(亮度)

    • 取值范围:0% ~ 100%
    • 0% = 黑色
    • 50% = 正常亮度
    • 100% = 白色

2. 示例

/* 纯红色 */
color: hsl(0, 100%, 50%);/* 纯绿色 */
color: hsl(120, 100%, 50%);/* 纯蓝色 */
color: hsl(240, 100%, 50%);

3. 调整亮度和饱和度

/* 低饱和度(灰调红) */
color: hsl(0, 30%, 50%);/* 高亮度(粉色) */
color: hsl(0, 100%, 80%);/* 低亮度(暗红) */
color: hsl(0, 100%, 20%);

4. 带透明度的写法 —— hsla()

类似于 rgba(),可以增加一个 alpha(透明度)参数:

/* 半透明蓝色 */
color: hsla(240, 100%, 50%, 0.5);

5. 常见应用

  1. 渐变背景(配合 linear-gradient 使用):

    background: linear-gradient(to right,hsl(200, 100%, 50%),hsl(200, 100%, 80%)
    );
    
  2. 动态主题(用 HSL 调整亮度/饱和度,比 HEX 更直观):

    :root {--theme-hue: 200;
    }body {background: hsl(var(--theme-hue), 50%, 95%);color: hsl(var(--theme-hue), 80%, 20%);
    }
    

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

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

相关文章

企业级Spring事务管理:从单体应用到微服务分布式事务完整方案

企业级Spring事务管理:从单体应用到微服务分布式事务完整方案 🌟 你好,我是 励志成为糕手 ! 🌌 在代码的宇宙中,我是那个追逐优雅与性能的星际旅人。 ✨ 每一行代码都是我种下的星光,在逻辑的土…

继续记录面试题

坐在工位,没事干心慌的不行,可能也是房贷压的。一闲下来就开始胡思乱想,无法沉下心去背那些八股文。这才刚刚接到离职通知第三天啊。而且、我还在坐班呢!!! 哎、怪不得有句老话说的,人穷志短&a…

从零开始学习:深度学习(基础入门版)(第2天)

(一)在pycharm软件中,用python语言,opencv库实现以下功能(1.1)图片的边界填充核心流程:读取原始图像使用 cv2.imread() 加载名为 yueshan.png 的图像文件统一边界参数设定四周留白尺寸均为 50px(上下左右各…

HTTP协议-3-HTTP/2是如何维持长连接的?

先说结论:HTTP/2的“长连接” 一个TCP连接 多路复用 二进制帧 流控制 持久会话管理 它不只是“连接不断”,更关键的是:在这个长连接上,可以同时并发传输成百上千个请求和响应,互不阻塞! 1、HTTP/2的“…

图解希尔排序C语言实现

1 希尔排序 希尔排序(Shell Sort)是D.L.Shell于1959年提出来的一种排序算法,在这之前排序算法的时间复杂度基本都是O(n),希尔排序算法是突破这个时间复杂度的第一批算法之一。 1.1 基本概念与原理 希尔排序通过将原始列表分割成若…

网络协议——HTTPS协议

目录 一、HTTPS是什么 加密是什么 二、HTTPS的工作过程 (一)对称加密 (二)非对称加密 (三)在非对称加密的基础上,引入证书校验 证书是什么 证书的内容 用证书解决中间人攻击 三、总结 …

React 基础实战:从组件到案例全解析

React 基础实战专栏:从组件到案例全解析 本专栏围绕 React 核心概念(组件、Props、State、生命周期)展开,通过 6个实战案例+核心知识点拆解,帮你掌握 React 基础开发逻辑,每篇聚焦1个实战场景,搭配完整代码与原理讲解,适合 React 入门者巩固基础。 专栏目录 【组件传…

ARM芯片架构之CoreSight Channel Interface 介绍

CoreSight Channel Interface(通道接口)详解1. 概述 Channel Interface 是 ARM CoreSight 架构中用于在不同组件之间传递触发事件的专用接口。它是 Event Interface 的增强版本,支持多通道、双向通信,以及同步与异步两种时钟域连接…

Blender模拟结构光3D Scanner(二)投影仪内参数匹配

关于投影仪外参的设置可参见前一篇文章 Blender模拟结构光3D Scanner(一)外参数匹配-CSDN博客 使用Projectors插件模拟投影仪 Step 1 在Github下载插件(https://github.com/Ocupe/Projectors)。下载zip压缩包即可,无…

synchronized的作用

目录 一、核心作用 二、实现原理:基于"对象锁" 三、使用方式 四、锁的优化 五、优缺点 六、总结 synchronized 是 Java 中用于解决多线程并发安全问题的核心关键字,它的主要作用是实现线程间的同步,确保多个线程在访问共享资…

机试备考笔记 14/31

2025年8月14日 小结:(17号整理14号的笔记,这辈子真是有了w(゚Д゚)w)昨天摔了跤大的,今天好妈妈在家,松弛。省流:6道中等,明天只学了10分钟嘻嘻 目录LeetCode22…

dolphinscheduler中任务输出变量的问题出现ArrayIndexOutOfBoundsException

一段脚本任务如下:ret/data/dolphinscheduler/loadOraTable.sh "yonbip/yonbip10.16.10.69:1521/orcl" "select t.bondcontractno,t.olcunissuemny from yonbip.bond_contract t " "/dmp/biz" "bip" "2025-08-13"…

OpenCv(二)——边界填充、阈值处理

目录 一、边界填充(Border Padding) 1. 常见填充类型及效果 2.代码示例 (1)constant边界填充,填充指定宽度的像素 (2)REFLECT镜像边界填充 (3)REFLECT_101镜像边界…

Leetcode 15 java

今天复习一下翻转二叉树 226. 翻转二叉树 给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 示例 1: 输入:root [4,2,7,1,3,6,9] 输出:[4,7,2,9,6,3,1]示例 2: 输入:root [2…

嵌入式学习的第四十九天-时钟+EPIT+GPT定时器

一、时钟1.时钟系统基本概念(1)PLL (锁相环, Phase-Locked Loop)作用:PLL是一种反馈控制电路,用于生成稳定的高频时钟信号。它通过将输出时钟与参考时钟进行比较和调整,可以产生比输入参考时钟频率高得多的输出时钟。倍…

Python Sqlalchemy数据库连接

Python Sqlalchemy数据库连接一、连接数据二、模型三、ORM操作一、连接数据 from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker# 1. 连接数据库 dbHost postgres://用户名:密码主机:端口/数据库名 engine create_engine(dbHost) # create_engi…

【Node.js】ECMAScript标准 以及 npm安装

目录 一、 ECMAScript标准 - 默认导出和导入 二、ECMAScript标准 - 命名导出和导入 三、包的概念 五、 npm - 安装所有依赖 六、 npm - 全局软件包 Node.js总结 总结不易~ 本章节对我有很大的收获, 希望对你也是!!! 本节素材…

NPM 、 NPX

NPM vs. NPX 简单来说,npm 是一个 node 包管理器,npx 是一个 Node 包执行器。 NPX 是一个 Node 包执行器,该 Node 包可以是本地也可以是远程的。允许开发者在无需安装的情况下执行任意 Node 包。npm 在安装nodejs 就自动带了 npm install -g …

守护品质安全,防伪溯源系统打造全链路信任体系

一、引言在当下这个信息透明、品质至上的时代,防伪溯源已经成为众多品牌保护自身利益、提升消费者信任度的重要手段。为了满足市场上对高效、可靠的防伪溯源查询系统的迫切需求,榕壹云精心打造了一款防伪溯源查询系统。二、项目背景随着商品市场的不断扩…

【完整源码+数据集+部署教程】无人机航拍视角洪水检测与受灾房屋识别图像分割救援指导系统源码和数据集:改进yolo11-DCNV2

背景意义 研究背景与意义 随着全球气候变化的加剧,极端天气事件的频率和强度不断上升,洪水作为一种常见的自然灾害,给人类社会带来了严重的威胁。洪水不仅导致人员伤亡和财产损失,还对基础设施和生态环境造成了深远的影响。因此&a…