HTML5系列代码:HSLA半透明效果

  • 说明:
    HSLA(H,S,L,A)
  • 取值:
  • H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
  • S:Saturation(饱和度)。取值为:0.0% - 100.0%
  • L:Lightness(亮度)。取值为:0.0% - 100.0%
  • A:Alpha透明度。取值0~1之间。
  • 说明:
    HSL记法。
    此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HSLA半透明效果</title>
<style type="text/css">
ul {
	list-style:none;
	margin:10px;
	padding:0;
	background:url(../images/charactor.png) 10px 0 no-repeat;
}
li {height:20px;}
li:nth-child(1) {background:hsla(40, 50%, 50%, 0.1);}
li:nth-child(2) {background:hsla(40, 50%, 50%, 0.2);}
li:nth-child(3) {background:hsla(40, 50%, 50%, 0.3);}
li:nth-child(4) {background:hsla(40, 50%, 50%, 0.4);}
li:nth-child(5) {background:hsla(40, 50%, 50%, 0.5);}
li:nth-child(6) {background:hsla(40, 50%, 50%, 0.6);}
li:nth-child(7) {background:hsla(40, 50%, 50%, 0.7);}
li:nth-child(8) {background:hsla(40, 50%, 50%, 0.8);}
li:nth-child(9) {background:hsla(40, 50%, 50%, 0.9);}
li:nth-child(10) {background:hsla(40, 50%, 50%, 1);}
</style>
<body>
<ul>
  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
</ul>
</body>
</html>
展开阅读全文

Windows版YOLOv4目标检测实战:训练自己的数据集

04-26
©️2020 CSDN 皮肤主题: 成长之路 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值