re:从0开始的CSS学习之路 5. 颜色单位

0. 写在前面

没想到在CSS里也要再次了解这些颜色单位,感觉回到了大二的数字图像处理,可惜现在已经大四了,感觉并没有学会什么AI的东西
在这里插入图片描述

1. 颜色单位

  1. 预定义颜色名:HTML和CSS规定了147种颜色名。例如:red yellow green blue

  2. RGB颜色值
    rgb(red, green, blue):括号中每个参数代表对应颜色的浓度
    浓度值是0-255之间的整数,0表示无浓度,255表示最大浓度
    也可以使用百分比表示浓度 0%~100%

  3. 十六进制颜色值
    #RRGGBB:RR-红色 GG-绿色 BB-蓝色,每种颜色使用十六进制整数表示浓度
    十六进制(满十六进一):0 1 2 3 4 5 6 7 8 9 A B C D E F
    例如:#ff0000
    若每种颜色的两位数值都一样可以简写为:#f00

  4. RGBA:相较于RGB多了个A表示透明度,取值范围在0.0~1.0之间
    0.0表示透明 1.0表示不透明 0.5表示半透明

  5. HSL/HSLA
    H 色调(0-360)0红色->120绿色->240蓝色
    S 饱和度(0%-100%) 0%灰色->100%全彩
    L 亮度(0%-100%) 0%黑色->100%白色
    A透明度(0.0-1.0) 0.0透明->1.0不透明

示例如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>.div1 {width: 200px;height: 200px;/* background-color: red; *//* background-color: rgb(255, 200, 0); *//* background-color: rgb(100%, 0%, 0%); *//* background-color: #f00; *//* background-color: rgba(255, 0, 0, 0.5); */background-color: hsla(0, 100%, 50%, .3);}
</head><body><div class="div1"></div>
</body></html>

实际网页开发感觉hsla用的不多,主要还是以十六进制或rgb为主

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/672731.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Harbor介绍、整体架构和安装

Harbor介绍、整体架构和安装 文章目录 Harbor介绍、整体架构和安装1.Harbor介绍2.Harbor 整体架构3.安装Harbor3.1 主机初始化3.1.1 设置ip地址3.1.2 配置镜像源3.1.3 关闭防火墙3.1.4 禁用SELinux3.1.5 禁用swap3.1.6 设置时区 3.2 安装docker3.3 安装docker compose3.4 下载H…

kafka 文件存储机制

文章目录 1. 思考四个问题&#xff1a;1.1 topic中partition存储分布&#xff1a;1.2 partiton中文件存储方式&#xff1a;1.3 partiton中segment文件存储结构&#xff1a;1.4 在partition中如何通过offset查找message: 2. kafka日志存储参数配置 Topic是逻辑上的概念&#xff…

彻底弄懂mktemp命令的作用

mktemp 是一个在 Unix 和类 Unix 系统中用于创建临时文件或目录的命令行工具。它属于 GNU coreutils 套件的一部分。mktemp 的主要优点是它能够生成一个唯一的文件名&#xff0c;这有助于避免文件名冲突&#xff0c;并且可以安全地创建临时文件&#xff0c;因为这些文件通常只有…

EMC学习笔记(二十二)降低EMI的PCB设计指南(二)

降低EMI的PCB设计指南&#xff08;二&#xff09; 1.电源和地概述2.电感量3.两层板和四层板4.单层和双层设计中的微控制器接地5.信号返回地6.模拟、数字信号与大功率电源7.模拟电源引脚和模拟参考电源8.四层板电源设计参考注意事项 tips&#xff1a;资料主要来自网络&#xff0…

Unreal Engine 中的插值方法示例

1. 线性插值 线性插值方法 FMath::Lerp。这个方法用于在两个值之间进行线性插值&#xff0c;通过调整插值比例&#xff08;Alpha&#xff09;&#xff0c;我们可以实现平滑的数值过渡。下面是一个简单的例子&#xff1a; float FMath::Lerp(float A, float B, float Alpha); …

外汇天眼:Vistova──假投顾带单获利400%,黑平台一再拖延不出金

在这个物价高涨的时代&#xff0c;愈来愈人意识到投资抗通胀的重要性&#xff0c;但因缺乏相关的专业知识而感到迷茫&#xff0c;甚至因此误信诈骗集团保证获利、稳赚不赔的话术&#xff0c;蒙受极大的金钱损失。 不久前&#xff0c;一位投资人向外汇天眼爆料Vistova这平台&…

tkinter绘制组件(41)——菜单按钮

tkinter绘制组件&#xff08;41&#xff09;——菜单按钮 引言布局函数结构按钮部分菜单显示完整代码函数 效果测试代码最终效果 github项目pip下载结语 引言 TinUI5的新控件&#xff0c;菜单按钮&#xff0c;menubutton。 这是一个与TinUI菜单&#xff08;menubar&#xff0…

DAC调节DCDC输出电压的电路方案分析

BUCK型电源芯片的调压方式分析 1、前题 BUCK型的电源芯片非常多&#xff0c;常用的如LM2576、LM2596等等&#xff0c;这种芯片优点很多&#xff0c;比如功率大、体积小、效率高等。这种芯片一般都可以通过电阻分压的方式设定反馈脚VFB的电压来改变电源芯片的输出电压。但最近…

Ubuntu22.04切换系统cuda版本

由于最近项目要求的cuda版本有差异&#xff0c;而在Ubuntu中可以通过切换cuda来满足需求&#xff0c;现记录如下。 1、按照 Ubuntu22.04与深度学习配置 中的cuda安装章节&#xff0c;将需要的cuda版本下载到本地并进行安装。 2、cuda安装完成后修改bashrc文件内容 sudo gedit …

kmp算法板子及例题

对板子的详细解释见&#xff1a;pecco:kmp 板子 void get_pmt(const string& p) {//求pmt数组for (int i 1, j 0;i < p.size();i) {while (j && p[i] ! p[j])j pmt[j - 1];if (p[i] p[j])j;pmt[i] j;} }void kmp(const string& s, const string&…

2024年-视觉AI检测的面试题目总结

Hello,各位&#xff0c;面试大宝典又来拉; 持续更新&#xff1b;一定要理清自己简历上的项目&#xff0c;因为简历是你给面试官的入口&#xff0c;会根据你的简历问问题&#xff1b;目前leetcode水平169题&#xff1b;持续更新&#xff1b; c八股文和python的八股文最好持续看&…

vscode代码快捷键

1、 log console.log()2、edf export default (first)>{ second } 或者 export default function(params)>{ }可以使用tab键切换修改项 3、ednf export default function first(second) {third}4、! 生成html模板 5、div#app <div id"app"></di…

Java之网络编程

什么是计算机网络 是指将地理位置不同的具有独立功能的计算机设备通过通信连接起来&#xff0c;在网络操作系统、网络管理软件及网络通讯协议的管理与协调下&#xff0c;实现资源共享与信息传递的计算机系统 网络通讯的两个要素 通讯双方的网络地址 1.ip 2.端口号 通过ip端…

DAY14之二叉树理论基础及递归遍历和迭代遍历

理论基础 满二叉树 满二叉树&#xff1a;如果一棵二叉树只有度为0的结点和度为2的结点&#xff0c;并且度为0的结点在同一层上&#xff0c;则这棵二叉树为满二叉树。 如图所示&#xff1a; 这棵二叉树为满二叉树&#xff0c;也可以说深度为k&#xff0c;有2^k-1个节点的二叉…

CX341A 安装驱动与刷固件

参考 驱动安装1 DPDK编译&#xff1a;支持Mellanox 25Gbps网卡 - 知乎 NVIDIA Mellanox CX网卡固件、驱动系列操作 - 知乎 驱动安装2 Mellanox网卡驱动安装指南 Mellanox OFED_崇尚匀速 追求极致的技术博客_51CTO博客 驱动与固件&#xff1a; 家用万兆网络指南 6 - 比…

动态规划C语言

#include <stdio.h> #include <stdlib.h> //0-1背包问题是一种经典的组合优化问题&#xff0c; //问题描述为&#xff1a;有一个给定容量的背包和一组具有不同价值和重量的物品&#xff0c;如何选择物品放入背包中&#xff0c;以使得背包中物品的总价值最大化&…

深度学习入门笔记(二)神经元的结构

神经网络的基本单元是神经元&#xff0c;本节我们介绍神经元的结构。 2.1 神经元 一个神经元是由下面 5 部分组成的&#xff1a; 输入&#xff1a;x1,x2,…,xk。权重&#xff1a;w1,w2,…,wk。权重的个数与神经元输入的个数相同。偏移项&#xff1a;可省略。激活函数&#…

YOLO v8 参数设置,详解cfg/default.yaml

default.yaml 有很多训练、测试、预测、可视化等关键设置&#xff0c;一定不要忽略哦&#xff01; 1.概述 任务和模式设置&#xff1a;定义YOLO的任务&#xff08;如检测、分割、分类、姿态识别&#xff09;和模式&#xff08;如训练、验证、预测、导出、跟踪、基准测试&…

【已解决】onnx转换为rknn置信度大于1,图像出现乱框问题解决

前言 环境介绍&#xff1a; 1.编译环境 Ubuntu 18.04.5 LTS 2.RKNN版本 py3.8-rknn2-1.4.0 3.单板 迅为itop-3568开发板 一、现象 采用yolov5训练并将pt转换为onnx&#xff0c;再将onnx采用py3.8-rknn2-1.4.0推理转换为rknn出现置信度大于1&#xff0c;并且图像乱框问题…