返回顶部
首页 > 资讯 > 前端开发 > JavaScript >css3中hsla()的作用是什么
  • 329
分享到

css3中hsla()的作用是什么

2024-04-02 19:04:59 329人浏览 八月长安
摘要

小编给大家分享一下css3中hsla()的作用是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 在CSS3中,hsla()函数用于使用色相、饱和度、亮度、透

小编给大家分享一下css3中hsla()的作用是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

CSS3中,hsla()函数用于使用色相、饱和度、亮度、透明度来定义颜色,语法“hsla(色相值,饱和度值,亮度值,透明度值)”;色相值的取值范围为“0~360”,饱和度和亮度的取值范围为“0%~100%”,透明度的取值范围为“0~1”。

教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css3中,hsla()的作用是定义颜色。

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

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

  • 色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。

  • 饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取 0-100% 的数值。

  • 亮度(L) 取 0-100%,增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。

  • 透明度(A) 取值 0~1 之间, 代表透明度。

语法:

hsla(hue, saturation, lightness, alpha)
描述
hue - 色相定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation - 饱和度定义饱和度; 0% 为灰色, 100% 全色
lightness - 亮度定义亮度 0% 为暗, 50% 为普通, 100% 为白
alpha - 透明度定义透明度 0(透完全明) ~ 1(完全不透明)

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>

<body>
<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>
</body>
</html>

css3中hsla()的作用是什么

看完了这篇文章,相信你对“css3中hsla()的作用是什么”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网JavaScript频道,感谢各位的阅读!

--结束END--

本文标题: css3中hsla()的作用是什么

本文链接: https://lsjlt.com/news/94430.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • css3中hsla()的作用是什么
    小编给大家分享一下css3中hsla()的作用是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 在css3中,hsla()函数用于使用色相、饱和度、亮度、透...
    99+
    2024-04-02
  • CSS3中HSL和HSLA如何使用
    这期内容当中小编将会给大家带来有关CSS3中HSL和HSLA如何使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。使用CSS3 HSL声明同样是用来设置颜色的。下一个呢?...
    99+
    2024-04-02
  • css3中rem的作用是什么
    这篇文章给大家介绍css3中rem的作用是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 rem是一个相对大小的值,相对于html元素字体大小的单位,语...
    99+
    2024-04-02
  • css3中column-span的作用是什么
    这篇文章主要讲解了“css3中column-span的作用是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3中column-span的作用是什么”...
    99+
    2024-04-02
  • CSS3中box-shadow的作用是什么
    CSS3中的box-shadow属性用于向元素添加阴影效果。它可以为元素创建一个或多个阴影,并指定阴影的颜色、位置、模糊度和扩展程度...
    99+
    2023-09-22
    CSS3
  • CSS HSLA色调值是什么
    今天小编给大家分享一下CSS HSLA色调值是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一...
    99+
    2024-04-02
  • CSS3中box-sizing 属性的作用是什么
    CSS3中box-sizing 属性的作用是什么?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。盒模型的组成大家肯定都懂,由里向外content,padding,border,m...
    99+
    2023-06-08
  • CSS3中Border-color属性的作用是什么
    CSS3中的border-color属性用于设置边框的颜色。默认情况下,边框的颜色与文本颜色相同。但是通过使用border-colo...
    99+
    2023-10-24
    CSS3
  • CSS3中box-shadow属性的作用是什么
    CSS3中box-shadow属性的作用是什么?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。CSS3 --添加阴影CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影...
    99+
    2023-06-08
  • css3中 text-fill-color属性的作用是什么
    css3中 text-fill-color属性的作用是什么?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。<!DOCTYPE html><html&n...
    99+
    2023-06-08
  • css3盒子模型的作用是什么
    这篇“css3盒子模型的作用是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css3盒...
    99+
    2024-04-02
  • CSS3 only-child选择器的作用是什么
    CSS3 only-child选择器用于选取某个元素的唯一子元素。只有当一个元素为其父元素的唯一子元素时,才会被选中。这个选择器可以...
    99+
    2023-10-12
    CSS3
  • css3有什么作用
    这篇文章主要介绍“css3有什么作用”,在日常操作中,相信很多人在css3有什么作用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css3有什么作用”的疑惑有所帮助!接下来,...
    99+
    2024-04-02
  • css3的@supports有什么作用
    本篇内容介绍了“css3的@supports有什么作用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  ...
    99+
    2024-04-02
  • CSS3中transform的matrix是什么
    这篇文章主要介绍了CSS3中transform的matrix是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS3中transform的matrix是什么文章都会有所收获...
    99+
    2024-04-02
  • css3中rgba指的是什么
    这篇“css3中rgba指的是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css3中...
    99+
    2024-04-02
  • css3中vh指的是什么
    这篇文章主要介绍“css3中vh指的是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3中vh指的是什么”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • css3中hover指的是什么
    这篇文章主要介绍“css3中hover指的是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3中hover指的是什么”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • css3中border指的是什么
    本文小编为大家详细介绍“css3中border指的是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“css3中border指的是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识...
    99+
    2024-04-02
  • css3中flexbox的概念是什么
    本文小编为大家详细介绍“css3中flexbox的概念是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“css3中flexbox的概念是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作