好程序员web前端分享CSS学习：HSLA颜色模式

最新推荐文章于 2023-05-22 13:47:54 发布
最新推荐文章于 2023-05-22 13:47:54 发布
阅读量279 收藏
点赞数
分类专栏： 好程序员 web web前端培训 HTML5 CSS css3 文章标签： css3 web HTML 好程序员
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35970166/article/details/90266417
版权
本文介绍了HSLA颜色模式，它是HSL颜色模式的扩展，增加了不透明度控制。文章探讨了HSLA在现代浏览器中的兼容性，并指出它与RGBA颜色模式可以互换使用。针对IE8及以下版本的兼容性问题，提出了几种解决方案，包括使用非透明色覆盖、透明PNG背景和Gradient滤镜。此外，还通过示例展示了不同不透明度的HSLA颜色效果。
摘要由CSDN通过智能技术生成

好程序员web前端分享CSS学习：HSLA颜色模式

一、理论：
1.HSLA颜色模式
a.HSLA在HSL基础上增加了不透明度，值越大透明度越低
b.HSLA颜色模式的浏览器兼容性和HSL一样，只有较新版本的主流浏览器才支持
2.RGBA和HSLA颜色模式二者可以完全相互替换
3.RGBA/HSLA的IE兼容方案
a.在IE8以下版本，一般在前面设置一个非透明色，在其后紧跟一个RGBA/HSLA颜色模式
b.将透明的PNG图片平铺做为背景图片，适用于ie7-8
c.使用Gradient滤镜可以指定半透明颜色，将起止色设置为同一种颜色即可避免产生渐变

二、实践：
1.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style type="text/css">  
  7.         .row{  
  8.             overflow: hidden;  
  9.         }  
  10.         .row div{  
  11.             width: 80px;  
  12.             height: 80px;  
最低0.47元/天 解锁文章
好程序员IT
关注
专栏目录
CSS学习（十六）-HSLA颜色模式
bwshqh的博客
03-16 1907
一、理论： 1.HSLA颜色模式 a.HSLA在HSL基础上增加了不透明度，值越大透明度越低 b.HSLA颜色模式的浏览器兼容性和HSL一样，只有较新版本的主流浏览器才支持 2.RGBA和HSLA颜色模式二者可以完全相互替换 3.RGBA/HSLA的IE兼容方案 a.在IE8以下版本，一般在前面设置一个非透明色，在其后紧跟一个RGBA/HSLA颜色模式 b.将透明的PNG图片平铺做为
HSLA是一种表示颜色的模式，它由四个部分组成：色相（Hue）、饱和度（Saturation）、亮度（Lightness）和透明度（Alpha）
BLOG域名:programb.blog.csdn.net
06-30 1071
HSLA是一种表示颜色的模式，它由四个部分组成：色相（Hue）、饱和度（Saturation）、亮度（Lightness）和透明度（Alpha）。在HTML5中，我们可以使用HSLA颜色值来创建半透明效果。在这个例子中，我们使用了HSLA颜色值。来创建一个半透明的红色背景。
好程序员web前端分享CSS3颜色值HSLA表示方式
weixin_34365635的博客
05-16 110
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51说明：HSLA(H,S,L,A)取值：H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360S：Saturation(饱和度)。取值为：0.0%...
css颜色模式hsla和rgba
aoxi9939的博客
12-24 459
在CSS3中可以使用RGBA和HSLA两种色彩模式，这两个都可以用来设置颜色以及指定透明度。 rgba指的是：红色、绿色、蓝色、Alpha透明度（Red-Green-Blue-Alpha）前三个值取值从0~255或0%~100% hsla指定是：色调、饱和度、亮色、Alpha透明度（Hue-Saturation-Light-Alpha） 色调取值0~360,饱和度和亮度取值0%~1...
常用的CSS
c_x_m的博客
06-23 1027
文章目录1-1:弹性布局 --横向居中1-2:文字居中vertical-alignline-height1-3 文字超出父级标签文字一行-超出为省略号文字多行-超出为省略号1-4 图片随div的大小变化,自动填充并居中显示1-5 普通流布局code1-51-41-3-21-3-11-2-21-2-11-1 1-1:弹性布局 --横向居中 讲display:flex的好文 使文字等比例放大缩小全局设定:font-size:25px;有文字的元素中设定font-size:0.25rem 注:10px=1em 块
web前端之CSS3
hu0708的博客
08-03 990
css3
DIV+CSS学习笔记总结篇
qianduan666a的博客
07-29 886
DIV+CSS学习笔记总结篇 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标： 第一、梳理知识架构 负责内容的HTML 负责外观的css（层叠样式表） 负责行为
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
weixin_43779957的博客
06-01 3054
前言 一直对渐变背景这块比较感兴趣，但是因为每天加班实在太忙了，任务也比较多。所以就只能下班的时间研究渐变背景这方面的知识，一来满足了自己的好奇心，二来可以更加了解这方面的知识。跟更多不断学习的小伙伴们一起进步，一起汲取新的知识。不断成长，不断精进自己的知识。有想一起讨论技术，一起成长的伙伴们，也可以加微信一起交流。各微信群里面，有很多前端领域的大佬，在他们身上学到了很多，今后也努力向他们看齐。不断提升自己。加油。 CSS radial-gradient() 函数 定义与用法 radial-gradient
CSS 之 background 系列属性详解
weixin_45092437的博客
03-09 3万+
背景系列属性，共包含9种属性：background-color：设置元素的背景颜色。background-image：设置元素的背景图片。background-size：设置元素背景图片的大小。background-position：设置元素背景图片的位置。background-repeat：设置背景图片是否重复，以及如何重复。background-clip：设置元素背景的渲染区域。background-origin：设置元素背景的定位区域。background-attachment：设置元素的背景图片是否
CSS技巧之视觉效果
黎先生的博客
04-04 2711
CSS技巧（三）：视觉效果 源代码可访问仓库地址 视觉效果 1. 单侧投影 1.1 单侧投影 大多数人使用box-shadow的方法是，制定三个长度和一个颜色值。 1 box-shadow: 2px 3px 4px rgba(0, 0, 0, .5); box-shadow第一个长度表示水平方向投影，第二个为垂直方向投影，第三个为
CSS的background背景属性详解
最新发布
共同进步
05-22 6774
CSS的background背景属性详解 background-color: 背景颜色 - background-image: 背景图片 - background-repeat: 重复背景图片 - background-attachment: 是否固定或者随着页面的其余部分滚动 - background-position: 背景图片的位置 - background-size: 背景的尺寸 - background-origin: 背景图片定位区域 - background-clip: 背景图
background 背景属性详解
会敲代码的男老师的博客
02-03 3887
background 背景属性 我们知道元素有前景色color，与之对应的还有背景色，通过background我们可以为元素添加实色（background-color）和任意多个背景图片（background-image）。 css 背景常见属性 background-color background-position background-size background-repeat background-origin background-clip background-attachm
CSS 的 hsl() 和 hsla() 函数（设置颜色的方式之一）
单枪匹码
11-07 4515
一：CSS中的 hsl()函数： 1、定义与用法：hsl() 函数使用色相、饱和度、亮度来定义颜色。 HSL 即：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0 ~ 100%的数值。 亮度（L），取0 ~ 100%，增加亮度，颜色会向白...
css中颜色的设置
june_ruikang的博客
03-28 741
/*HSL色彩模式：hsl(length,percentage,percentage)：色调、饱和度、明亮度*/ /*HSL的优势：可以在同一色系中选择颜色，使得搭配不会太离谱*/ .hs1{ height: 20px; border: 1px solid #f00; padding: :10px; height: 170px;; background-color: hsl(0,0%
css颜色模式 hsla 和 rgba
Head_Bird的博客
10-03 1043
css颜色模式 hsla 和 rgba 在CSS3中可以使用RGBA和HSLA两种颜色模式（css3新特性），这两个都可以用来设置颜色以及指定透明度。 那么什么是RGBA和HSLA颜色模式呢？ 1、什么是 RGBA? RGBA(R,G,B,A) 取值介绍： R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数 | 百分数 A：Alpha透明度。取值0~1之间。 注意...
网站开发进阶（六十七）浅谈css中hsl()和hsla()设置颜色值的方法与应用
IT全栈 华强工作室
04-13 2446
实例 定义 HSL 颜色： #p1 {background-color:hsl(120,100%,50%);} /* 绿色 */ #p2 {background-color:hsl(120,100%,75%);} /* 浅绿 */ #p3 {background-color:hsl(120,100%,25%);} /* 暗绿 */ #p4 {background-color:hsl(120,60%,70%);} /* 柔和的绿色 */ 定义与用法 hsl() 函数使用色相、饱和度、亮度来定义颜色。 H
css样式,了解一下
好好学习，天天向上
06-01 344
有问题请指出,转载请标注,谢谢 常见的前缀 Firefox的-moz- IE的-ms- Opera的-a- Safari和Chrome的-wekit- 动画css-animations 盒子布局css-flexbox 遮罩css-masking 变形css-transforms 滤镜filter-effects 图像混合compositing 当某些值相互依...
辛星Web前端教程：CSS3贺岁版详解
8. **颜色和字体**：新增了更多的颜色模式和字体样式，如RGBA、HSLA颜色以及Web字体的引入，增强了设计的多样性和可读性。 教程作者辛星通过QQ群、贴吧和个人联系方式鼓励读者参与讨论和反馈，这不仅为学习者提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值