HTML5之HSLA colors

最新推荐文章于 2024-04-01 22:40:34 发布
最新推荐文章于 2024-04-01 22:40:34 发布
阅读量104 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/newway/archive/2012/03/29/2423791.html
版权

语法：

<length> || <percentage> || <percentage> || <opacity>

取值：

<length> ：
Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
<percentage> ：
Saturation(饱和度)。 取值为0%到100%之间的值；
<percentage> ：
Lightness(亮度)。 取值为0%到100%之间的值；
<opacity> ：
alpha(透明度)。 取值在0到1之间；

说明：

HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSLA是在HSL的基础上增加一个透明度(A)的设置。

兼容性：

类型Internet ExplorerFirefoxChromeOperaSafari
版本(×)IE6(√)Firefox 3.0(√)Chrome 2.0.x(√)Opera 9.64(√)Safari 4
(×)IE7(√)Firefox 3.5   
(×)IE8    
     

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HSLA colors</title>
</head>
<body style="background-color:#ffffff;">
<div style="background-color: hsla(0,100%,50%,0.2);color: hsla(0,0%,0%,.8);">在Firefox的浏览器里能看到透明色背景</div>
</body>
</html>

 

可以调整背景色透明度，亦可调整字体透明度。

转载于:https://www.cnblogs.com/newway/archive/2012/03/29/2423791.html

weixin_30265171
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css零到一基础教程009：CSS HSL 颜色
kerryqpw的博客
03-18 793
HSL 值 在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下： hsla(hue, saturation, lightness) 色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。 饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。 亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。 请通过混合以下 HSL 值来进行实验： 实例 &lt..
HSLA是一种表示颜色的模式，它由四个部分组成：色相（Hue）、饱和度（Saturation）、亮度（Lightness）和透明度（Alpha）
BLOG域名:programb.blog.csdn.net
06-30 938
HSLA是一种表示颜色的模式，它由四个部分组成：色相（Hue）、饱和度（Saturation）、亮度（Lightness）和透明度（Alpha）。在HTML5中，我们可以使用HSLA颜色值来创建半透明效果。在这个例子中，我们使用了HSLA颜色值。来创建一个半透明的红色背景。
CSS中的HSLA颜色
weixin_30952103的博客
10-02 96
HSL色彩，是一种工业界的色彩标准，因为它能涵盖到人类视觉所能感知的所有颜色，所以在工业界广泛应用。 H是色度，取值在0度~360度之间，0度是红色，120度是绿色，240度是蓝色。360度也是红色。 S是饱和度，是色彩的纯度，是一个百分比的值，取值在0%~100%，0%饱和度最低，100%饱和度最高 L是亮度，也是一个百分比值，取值在0%~100%，0%最暗，100%最亮。...
颜色的HSLA 表示法
朝阳39的博客
10-14 1207
举例： background-color: hsla(240,50%,50%,0.4); 解释： H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。 S 饱和度，取值范围 0%~100%。值越大，越鲜艳。 L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。 A 透明度，取值范围 0~1。 如果不知道...
HSL和HSLA颜色
weixin_44131922的博客
04-10 1105
HSL HSL 颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。 HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。 HSL 颜色值是这样规定的： hsl(hue, saturation, lightness)。 Hue 是色盘上的度数（从 0 到 360）:0 (或 360) 是红色，120 是绿色，240 是蓝色。 Saturation 是百分比值；0% 意味着灰色，而 10
fancy-colors
03-19
HTML5引入了许多新的标签和特性，其中一些可能涉及到颜色，如`<canvas>`用于绘制图形，可以使用JavaScript来控制颜色；`<svg>`则允许在页面上插入矢量图形，同样可以应用复杂的颜色效果。 至于压缩包子文件的文件名...
html5 canvas梦幻背景动画特效.zip
07-11
7. **颜色和透明度（Colors and Opacity）**：可以使用RGB、RGBA、HSL、HSLA等颜色模式，以及`globalAlpha`属性来调整元素的透明度。 8. **事件监听（Event Listeners）**：可能添加了鼠标或触摸事件监听器，使动画...
Random-colors
03-27
"Random-colors" 是一个可能与前端开发相关的项目或库，尤其考虑到其标签为 "HTML"。这个项目可能涉及到生成随机颜色的JavaScript函数或者库，用于网页设计中的颜色方案、背景色、边框色等元素的动态变化。在HTML中...
fonts-colors
03-31
标题“fonts-colors”暗示了我们讨论的主题集中在字体和颜色在HTML中的应用。HTML（超文本标记语言）是网页设计的基础，它允许我们定义文本样式，包括字体和颜色，以创建吸引人的、易于阅读的页面内容。让我们深入...
HTML5教程五
11-15
在网页中直接绘制图表也曾经是控件垄断的天下，各种图报表的绘制曾经困扰着广大开发者，现在HTML5中引入了原生的图形绘制工具，可以让你在HTML代码中直接绘制图表，本节课程将介绍如何使用这一功能。
CSS 的 hsl() 和 hsla() 函数（设置颜色的方式之一）
单枪匹码
11-07 4301
一：CSS中的 hsl()函数： 1、定义与用法：hsl() 函数使用色相、饱和度、亮度来定义颜色。 HSL 即：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0 ~ 100%的数值。 亮度（L），取0 ~ 100%，增加亮度，颜色会向白...
css中HSLA
zjgyb37的博客
07-01 1476
今天发现了css中的另一个元素HSLA： Hue(色调)： 0(或者360)表示红色，120表示绿色，240表示蓝色，不同取值有不同颜色； Saturation(饱和度)： 取值为0%到100%之间的值； Lightness(亮度)： 取值为0%到100%之间的值； Alpha(透明度)： 取值在0到1之间；比如说可以这样使用 background-image: lin
HTML CSS 如何设置颜色
CyberPlayer的博客
02-28 725
RGBA 颜色 RGBA 颜色值是 RGB 颜色值的扩展，带有 alpha 通道 - 该通道规定颜色的不透明度。 RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。 HSL 颜色 HSL 指的是色相、饱和度和亮度（Hue、Saturation 以及 Lightness）。 HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。..
html基础：颜色的 5 种表示方法（最全！）
最新发布
u013179804的博客
04-01 2960
HTML 颜色的应用可以大大提升网页的视觉效果和用户体验，因此合理地运用颜色是网页设计中的重要一环。你可能会问，这么多颜色需要一个一个记住么？不必，你只需要知道它的写法就可以了。我们工作流程的前一还是设计，她会给定好我们设计稿。我们只负责在 设计软件 Photoshop(PS) ，或者借助吸色工具吸取就可以了。在使用颜色时需要注意搭配、可访问性等方面的考虑。不过咱们不用担心，颜色这个事，不是由前端决定，而是设计同学。如果有不确定的颜色，和 UI 设计同学多确认就可以了。OK，以上，本文完。
CSS中hsla的用法
暗影刀客的博客
12-24 3087
记下来，周末再写
html的hsl形式的颜色选择器,简单的HSL颜色选择器/拾色器
weixin_28881787的博客
06-03 464
JavaScript语言：JaveScriptBabelCoffeeScript确定var canvas = document.getElementById("input"),output = document.getElementById("output"),lock = document.getElementById("lockStat"),ctx = canvas.getContext("2...
html中的hsl颜色表示法
鞠培中的专栏
09-29 3559
在html中用的最多的莫过于rgb了，不过有的时候我们
CSS学习（十六）-HSLA颜色模式
bwshqh的博客
03-16 1894
一、理论： 1.HSLA颜色模式 a.HSLA在HSL基础上增加了不透明度，值越大透明度越低 b.HSLA颜色模式的浏览器兼容性和HSL一样，只有较新版本的主流浏览器才支持 2.RGBA和HSLA颜色模式二者可以完全相互替换 3.RGBA/HSLA的IE兼容方案 a.在IE8以下版本，一般在前面设置一个非透明色，在其后紧跟一个RGBA/HSLA颜色模式 b.将透明的PNG图片平铺做为
HTML5应用开发技术-CSS3的基本语法.pptx
03-03
CSS3作为HTML5应用开发的关键技术之一，提供了丰富的样式和布局功能，让开发者能够创建更具吸引力和交互性的网页应用。随着浏览器对CSS3特性的广泛支持，这些新特性在现代Web开发中已经得到了广泛应用。了解和熟练...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值