CSS3之HSL

一、颜色表示法介绍

表示颜色除了十六进制RGBA还是HSL(HSLA),其中RGBA及HSA  IE9及以上才支持(IE6/7/8需要使用十六进制表示),因为这两种都是CSS3的新增的。

PS给我提供了5种颜色表示法,其中HSB就是我们所说的HSL。

二、HSL介绍及使用

H:色相 ,值为0-360

S:饱和度,值为百分比

L:亮度,值为百分比

如果有HSLA,A为透明度,值为0-1

HSL是一个360°的色环,60°为黄色,120°为绿色,180°为青色,240°为黄色,300°为洋红色,360°为红色,通过这个标准,你可以大致估计颜色的一个范围。

写法

三、HSL引发的一个面试题

HSLA、opacity、visibility=hidden、display=none的区别?

HSLA/RGBA 只是背景透明,元素内容没有透明效果

opacity=0,元素被隐藏,整个元素透明,包括元素内容不改变页面布局,若该元素已经绑定事件如click事件,若点击该区域,会触发事件。

visibility=hidden,元素被隐藏,不改变页面布局,但不会触发该元素已经绑定的事件。

display=none,元素被隐藏,改变页面布局,可以理解成在页面中该元素被删除。


如果你需要三种表示法颜色转换,请参考:3种表示法的转换


如果喜欢,不要吝啬你的爱心“❤”哦!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 9,210评论 22 225
  • CSS3简介 CSS3的现状 浏览器支持程度差,需要添加 私有前缀 ; 移动端支持优于PC端; 不断改进中; 应用...
    magic_pill阅读 897评论 0 1
  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
    福尔摩鸡阅读 16,496评论 14 51
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,845评论 32 459
  • display: none; 与 visibility: hidden; 的区别 联系:它们都能让元素不可见 区别...
    纹小艾阅读 1,970评论 0 1

友情链接更多精彩内容