代码编织梦想

和ARGB一样,都是用来表示颜色的。表示的效果都是一样的,只是形式不同。
一般情况下,你是用不上的,因为一般用ARGB比较多,也更熟悉。但是有些书籍喜欢用这种形式,还是要了解一下的。

定义

hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。

HSLA 即色相、饱和度、亮度、透明度(英语:Hue, Saturation, Lightness, Alpha )。

色相(H) 是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。
饱和度(S ) 是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取 0-100% 的数值。
亮度(L) 取 0-100%,增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。
透明度(A) 取值 0~1 之间, 代表透明度。

在这里插入图片描述

用法

以样式#p4 柔和的绿色为例。120表示绿色(色相),60%表示饱和度(其实就是含颜色的浓度),70%表示亮度。0.3表示透明度。

#p1 {background-color:hsl(120,100%,50%,0.3);} /* 绿色 */
#p2 {background-color:hsl(120,100%,75%,0.3);} /* 浅绿  */
#p3 {background-color:hsl(120,100%,25%,0.3);} /* 暗绿  */
#p4 {background-color:hsl(120,60%,70%,0.3);} /* 柔和的绿色 */
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
<p>HSL 颜色,并使用透明度:</p>
<p id="p1">绿色</p>
<p id="p2">浅绿</p>
<p id="p3">暗绿</p>
<p id="p4">柔和的绿色</p>
<p id="p5">紫色</p>
<p id="p6">柔和的紫色</p>

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ScottePerk/article/details/126984157

前端需要知道的CSS函数大全-爱代码爱编程

之前一直以为css没有几个函数,今天才发现css现在竟然已经有86个函数了,意不意外,惊不惊喜!!! 我一直比较喜欢用css来解决之前js实现的效果,这样对性能时一种优化,自己也有成就感,希望这些函数能够更多的应用到自己的项目中,向张鑫旭老师学习做一些惊艳的效果出来把css玩出花   根据w3cplus中可以划分为以下几类: 属性函数:attr()

CSS中的函数-爱代码爱编程

CSS中也有函数,我们也会经常用到,今天我就来罗列一下CSS中所有的函数   先从CSS2说起 在CSS2中有两个函数,这两个函数有一个使我们经常用到的  rgb() rgb()使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。attr() attr()返回选择元素的属性值。 它有一个必须值,这个值必须是HTML元素的属性名,

css中hsla代表_hsla()函数以及CSS中的示例-爱代码爱编程

css中hsla代表 Introduction: 介绍: The use of functions is very beneficial for web development and one must learn as many functions as they can, therefore keep learning functio

CSS函数指南-爱代码爱编程

在编程语言中,函数是执行特定任务的一段代码,像其他编程语言一样,CSS也有自己的函数,可以在插入值的地方使用,或者和其他值混合使用, 下图是一段使用函数的css定义: 不像其他编程语言的函数输出,CSS函数的输出会产生视觉上的影响,如下面的例子会对使用了has-orange-glow这个类的元素产生橙色外发光效果: .has-orange-glow

CSS函数(一)-爱代码爱编程

CSS函数(一) 大家都知道js函数,你们清楚css的函数么? rgb() 对,没错,这就是一个典型的css函数。 那大家知道css有多少函数么,鄙人从w3cplus摘录了一些常用的css函数,w3cplus将其分为9大类,如下: 属性函数:attr() 颜色函数:rgb()、rgba()、hsl()、hsla()、hwb()、color-mo

css函数-爱代码爱编程

CSS 函数 随手笔记, 我只记录重点的,常用的。 css函数有很多。 例如 rgba(), rgb(), hsla(), hsl(), linear-gradient()… 有兴趣自行了解吧 attr(); 返回选择元素的属性值。 获取父盒子的某一项 元素的值, (上手试试就知道了, 我形容 容易误解) div:after { cont

CSS 函数-爱代码爱编程

  之前一直以为 css 没有几个函数,今天才发现 css 现在竟然已经越来越多了,一起来看看下面这些函数,你都认识多少? 属性函数 attr() 背景图片函数 linear-gradient() radial-gradient() conic-gradient() repeating-linear-gradient() rep

CSS3 函数-爱代码爱编程

calc() 计算动态长度 calc(xxxx - xxxx) “+”, “-”, “*”, “/” 任何长度值都可以使用calc()函数进行计算 var() 变量函数 :root { --main-bg-color: coral; ... } * { background-color: var(--main-bg-color); }

html内置函数,css3有那些内置函数-爱代码爱编程

css3内置函数有:calc()、cubic-bezier()、hsl()、hsla()、linear-gradient()、radial-gradient()、rgba()、var()、max()、min()、cycle()等等。 本教程操作环境:Windows7系统、css3版本、Dell G3电脑。 教程推荐:css视频教程 css3内

css的class定义函数,【Hello CSS】第五章-CSS的选择器与函数-爱代码爱编程

CSS选择器(CSS Selectors)啥叫选择器?简单来说就是通过一些定义来选中特定的HTML标签。biu~ 首先我们来看看选择器的分类: 基本选择器类型选择器:简单来说就是直接选择HTML标签(不带<>的那种),例如:html {width: 100%;}; 类选择器:就是HTML标签中class属性的值(但就是给每个值加上了.

css函数大全_丶oasis的博客-爱代码爱编程

一、属性函数 attr() 返回所选元素的属性值 二、背景图片函数: linear-gradient():将线性突变设置为背景图像。定义至多两种色彩(从上到下) radial-gradient():将径向突变设置为背景图像。定义至多两种色彩(从核心到边缘) conic-gradient():锥形突变 repeating-linear-gradient()

html牛客刷题笔记-4_隐藏用户y的博客-爱代码爱编程

    p标签内只能嵌套内联元素, 不能嵌套块元素 ,类似h1、div、ul块元素都不可自由嵌套在p标签内。  ul标签中只能嵌套li标签,不能直接在ul中输入其它标签或文字。     这道题没有找到合理的解释,目前没有浏览器支持 box-flex 属性。     A.HTTP302状态码代表的意思是 临时重定向 ,即