Learn something about front end——颜色


好装的标题啊哈哈哈哈哈哈

最近get了一个学习前端的网站叫FreeCodeCamp

原色:rgb三个值的其中一个值拉满,比如说rgb(255,0,0)是红色这样,三个主色:

  • 红色 rgb(255, 0, 0) #FF0000
  • 绿色 rgb(0, 255, 0) #00FF00
  • 蓝色 rgb(0, 0, 255) #0000FF

间色(Secondary color):rgb三个值中的其中两个值拉满,即两个原色组合起来,分别有:

  • 黄色(yellow) rgb(255, 255, 0)
  • 青色(cyan) rgb(0, 255, 255)
  • 品红色(magenta) rgb(255, 0, 255)

复色:一种原色和一种临近的颜色组合起来,如:

  • 橙色 rgb(255,127,0) 红多绿少

色轮上相互对立的两种颜色称为补色。如果将两种互补色组合在一起,它们会产生灰色。 但当它们并排放置时,这些颜色会产生强烈的视觉对比,显得更亮。

HSL颜色模型

用色调、饱和度和亮度来表示颜色

css中hsl函数接收3个值:0-360的数字表示色调,0-100的百分比表示饱和度,0-100的百分比表示亮度,例如:

background-color: hsl(240, 100%, 50%); // 纯蓝色
等同于
background-color: rgb(0,0,255); 
background-color: #0000FF; 

其中色调可以想象成一个色轮,色轮红色是0度,绿色是120度,蓝色是240度

在这里插入图片描述

饱和度是指纯色的颜色强度

亮度是指颜色出现的亮度,从0%全黑到100%全白,其中50%是中性

渐变

渐变是一种颜色过渡到另一种颜色。在CSS中linear-gradient函数用来控制沿线的过渡方向和使用的颜色

linear-gradient函数实际上创建了一个image原色,通常可以接受图像作为一个值的background属性配对

linear-gradient(gradientDirection, color1, color2, ...);

其中gradientDirection表示过渡的线的方向,单位是deg,表示角度的意思,如0deg就是竖着从下到上过渡,第一个颜色在下,第二个颜色在上,…。就像一个钟表的指针,从圆心指向12点是0度,从圆心到指针的方向,180度就是6点钟方向,从上到下过渡;270度为9点钟方向,从右到左过渡。

如果没有给gradientDirection参数,则默认沿着180deg从上至下排列颜色

color1/2这些是颜色参数,这些颜色可以是任何类型的,包括颜色关键字、十六进制、rgb或hsl

比如下面是从左到右的红绿渐变:

background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0,255,0));

在这里插入图片描述
再比如从右到左的红橙黄渐变:

background: linear-gradient(270deg, red, orange, yellow);

在这里插入图片描述
颜色中间点(color-stop)允许微调颜色沿渐变线的位置,不加单位默认是px,也可以写成百分比的形式。不写颜色中间点时,默认沿渐变线均匀分布颜色

例如红黑渐变:

background: linear-gradient(90deg, red 20%, black);

在这里插入图片描述
红色部分只占20%,黑色占大部分

透明度

透明度描述事物的不透明性

可以使用CSS中的opacity属性来控制元素的透明度,值为0-1或者0%-100%。值为0或0%,元素则完全透明;值为1或100%,元素则完全不透明,也是默认情况。

另一种控制元素透明度的方法是使用alpha通道,在0-1之间取一个数作为alpha通道:

rgba(redValue, greenValue, blueValue, alphaValue);
rgba(0, 0, 0, .5); // 小数点前面的0可以省略
#000000CC
hsla(120, 100%, 50%, .8)

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

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

相关文章

GAN:对抗生成网络【通俗易懂】

一、概述 对抗生成网络(GAN)是一种深度学习模型,由两个神经网络组成:生成器G和判别器D。这两个网络被训练来协同工作,以生成接近真实数据的新样本。 生成器的任务是接收一个随机噪声向量,并将其转换为与真…

鸿蒙语言TypeScript学习第18天:【泛型】

1、TypeScript 泛型 泛型(Generics)是一种编程语言特性,允许在定义函数、类、接口等时使用占位符来表示类型,而不是具体的类型。 泛型是一种在编写可重用、灵活且类型安全的代码时非常有用的功能。 使用泛型的主要目的是为了处…

SqlServer快速导出数据库结构的方法

1、查询出所有的表 SELECT name, id From sysobjects WHERE xtype u ORDER BY name ASC 2、根据表名查询出表结构 select syscolumns.name as "列名", systypes.name as "数据类型", syscolumns.length as "数据长度", sys.extended_prope…

prompt 工程整理(未完、持续更新)

工作期间会将阅读的论文、一些个人的理解整理到个人的文档中,久而久之就积累了不少“个人”能够看懂的脉络和提纲,于是近几日准备将这部分略显杂乱的内容重新进行梳理。论文部分以我个人的理解对其做了一些分类,并附上一些简短的理解&#xf…

【Golang】并发编程之三大问题:原子性、有序性、可见性

目录 一、前言二、概念理解2.1 有序性2.2 原子性后果1:其它线程会读到中间态结果:后果2:修改结果被覆盖 2.3 可见性1)store buffer(FIFO)引起的类似store-load乱序现象2)store buffer(非FIFO)引起的类似store-store乱序…

Netty学习——实战篇4 Netty开发Http服务实战、ByteBuf使用、开发群聊系统 备份

1 Netty开发Http服务实战 (1)Netty服务器监听8000端口,浏览器发出请求“http://localhost:8000” (2)服务器可以回复消息给客户端,“你好,我是服务器”,并对特定请求资源进行过滤。 HttpServer…

冯诺依曼与进程【Linux】

文章目录 冯诺依曼体系结构(从硬件的角度描述)冯诺依曼体系结构(从软件的角度描述)操作系统(软件)理解管理系统调用和库函数进程查看进程的两种方式 通过系统调用获取进程的PID和PPID通过系统调用创建进程-…

Linux之 USB驱动框架-USB总线核心和主控驱动(4)

一、USB设备描述符 一个USB设备描述符中可以有多个配置描述符,即USB设备可以有多种配置;一个配置描述符中可以有多个接口描述符,即USB设备可以支持多种功能(接口);一个接口描述符中可以有多个端点描述符。 …

SpringBoot项目创建及简单使用

目录 一.SpringBoot项目 1.1SpringBoot的介绍 1.2SpringBoot优点 二.SpringBoot项目的创建 三.注意点 一.SpringBoot项目 1.1SpringBoot的介绍 Spring是为了简化Java程序而开发的,那么SpringBoot则是为了简化Spring程序的。 Spring 框架: Spring…

linux 自定义命令/别名

参考资料 Linux(Ubuntu)自定义命令的使用Linux/Ubuntu系统自定义Shell命令Ubuntu/Linux 操作系统 自定义命令 目录 一. 为路径取别名二. 修改.profile文件2.1 .profile简介2.2 需求2.3 修改.profile文件 三. 创建软链接 一. 为路径取别名 ⏹需求:有一个work文件夹…

Unity 获取RenderTexture像素颜色值

拿来吧你~ 🦪功能介绍🌭Demo 🦪功能介绍 💡不通过Texture2D 而是通过ComputerShader 提取到RenderTexture的像素值,效率有提升哦! 💡通过扩展方法调用,方便快捷:xxxRT.G…

GTX312L【超强抗干扰、12通道电容式触摸芯片】

GTX312L是韩国GreenChip推出的一款12通道电容式触摸IC,具备自动灵敏度校准、超强抗干扰能力,可抗特斯拉(小黑盒)线圈干扰,可完美Pin to Pin替换TSM12;支持单键/多点触控。 产品描述: 该芯片供…

PHP反序列化命令执行+PHP反序列化POP大链 +PHP反序列化基础

[题目信息]: 题目名称题目难度PHP反序列化命令执行1 [题目考点]: 反序列化命令执行,获取题目flag。[Flag格式]: SangFor{t5euvZ_OB8Jd_h2-}[环境部署]: docker-compose.yml文件或者docker tar原始文件。 docker-compose up …

HADOOP大数据处理技术9-JavaSe

心若有阳光 你便会看见这个世界有那么多美好值得期待和向往 ​ 2024/4/9 13.static 用于修饰属性和方法 static属性通过类名访问 1)static实现内存共享 bean1和bean2的内存是互相独立的 怎么实现内存共享呢? 共享内存​public class Comm { public…

Java中的装箱和拆箱

本文先讲述装箱和拆箱最基本的东西,再来看一下面试笔试中经常遇到的与装箱、拆箱相关的问题。 目录: 装箱和拆箱概念 装箱和拆箱是如何实现的 面试中相关的问题 装箱和拆箱概念 Java为每种基本数据类型都提供了对应的包装器类型,至于为…

git报错

这里写自定义目录标题 git报错Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 有一个原因就是在github上设置对应密钥时,有一个key获取应该设置为…

在Debian 12系统上安装Docker

Docker 在 Debian 12 上的安装 安装验证测试更多信息 引言 在现代的开发环境中,容器技术发挥着至关重要的作用。Docker 提供了快速、可靠和易于使用的容器化解决方案,使开发人员和 DevOps 专业人士能够以轻松的方式将应用程序从一个环境部署到另一个环…

Ubuntu20从0开始选择合适版本手动安装cuda,torch-geometric,jax

一个全新的ubuntu20台式机,在Additional Drivers安装nvidia-470-server(一开始安装450,cunda版本只能到11.0,torch有些库用不了,可以直接切换点击Apply Changes重启就行) nvidia-smi查看CUDA Version可到…

Docker之自定义镜像上传至阿里云

一、Alpine介绍 Alpine Linux是一个轻量级的Linux发行版,专注于安全、简单和高效。它采用了一个小巧的内核和基于musl libc的C库,使得它具有出色的性能和资源利用率。 Alpine Linux的主要特点包括: 小巧轻量:Alpine Linux的安装…

Android 自定义SwitchPreference

1. 为SwitchPreference 添加背景&#xff1a;custom_preference_background.xml <?xml version"1.0" encoding"utf-8"?> <selector xmlns:android"http://schemas.android.com/apk/res/android"><item><shape android:s…