CSS3—HSL与HSLA属性
㈠HSL(H,S,L)
⑴通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色
⑵取值
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
⑶兼容性
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
⑷示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{ background-color:hsl(360, 50%, 50%); } </style>
</head>
<body>
<div>hsl颜色值</div> </body>
</html>
效果图：
㈡HSLA(H,S,L,A)
⑴此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度
⑵参数说明：
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
⑶兼容性
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
⑷示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{ background-color:hsl(360, 50%, 50%,.5); } </style>
</head>
<body>
<div>hsla颜色值</div> </body>
</html>
效果图：
参考：https://www.html.cn/book/css/values/color/hsla.htm
CSS3—HSL与HSLA属性的更多相关文章
- CSS3:HSL和HSLA
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性（转）
CSS2中色彩模式只有RGB色彩模式(RGB即RED.Green.BLue)和十六进制(Hex)模式,为了能支持 透明opacity 的Alpha值,CSS3又增加了RGBA色彩模式(RGBA即RED ...
- CSS3：不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
- CSS3 新增的文本属性
一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
- css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+
css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
随机推荐
- python入门小结
以下划线开头的标识符是有特殊意义的.以单下划线开头(_foo)的代表不能直接访问的类属性,需通过类提供的接口进行访问,不能用"from xxx import *"而导入: 以双下划 ...
- C++变量的声明和定义
1.变量的定义:变量的定义用于为变量分配存储控件,还可以为变量指定初始值.在一个程序中,变量有且仅有一个定义. 2.变量的声明:用于向程序表名变量的类型和名字.程序中变量可以声明多次,但只能定义一次. ...
- P1417 烹调方案（思维+01背包）
(点击此处查看原题) 题意 有n种食材,每种食材有三个属性,ai,bi和ci,如果在t时刻完成第i样食材则得到ai-t*bi的美味指数,用第i件食材做饭要花去ci的时间.问在T时间内,什么样的烹调方案 ...
- Struts框架的使用初步
Struts框架的使用初步: A:Apache下载struts.2.1.8.rar包. B:解压空工程,进入apps目录. C:将struts2的基本jar包拷到工程的lib目录中. D:配置web. ...
- C#异步编程学习笔记之-async和await（续）
书接上文,本篇主要记录的内容要点:1.针对async和await在实际应用中的使用方式:2.异步方法返回值(有返回值和无返回值)的两种情况: 示例一(无返回值): using System; usin ...
- BZOJ4241历史研究题解--回滚莫队
题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=4241 分析 这题就是求区间权值乘以权值出现次数的最大值,一看莫队法块可搞,但仔细想想,莫 ...
- void in javascript是一个指定要计算表达式但不返回值的运算符
void in javascript是一个指定要计算表达式但不返回值的运算符.void运算符使用格式如下:1.javascript:void(表达式)2.javascript:void表达式表达式是要 ...
- 实现表单label两端对齐
主要使用css3属性 text-align: justify; text-align-last: justify; 上代码: <ul> <li> <label class ...
- mint-ui下拉加载min和上拉刷新（demo实例）
<template> <div class="share"> <div class="header"> <div cl ...
- ubuntu install opencv
1. install the newest opencv version pip install opencv-python