首页 > 其他分享 >Web前端——HTML颜色

Web前端——HTML颜色

时间:2022-12-26 20:00:25浏览次数:63  
标签:Web 颜色 十六进制 背景 前端 HTML 设置 rbg 255


一. 颜色值

HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

这个表格给出了由三种颜色混合而成的具体效果:

Web前端——HTML颜色_背景颜色


三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。

1. 使用颜色的三种方法

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>颜色值</title>
</head>

<body>

<p style="background-color:#FFFF00">
通过十六进制设置背景颜色
</p>

<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>

<p style="background-color:yellow">
通过颜色名设置背景颜色
</p>

</body>

</html>

Web前端——HTML颜色_html_02

2. RGBA

RGBA 的意思是(Red-Green-Blue-Alpha)它是在 RGB 上扩展包括了 “alpha” 通道,运行对颜色值设置透明度。

相对于使用 rgb(255,255,0),使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能,这里的 0.5 表示透明度,范围 0~1,0 表示全透明。

通常我们为了省略一个 0

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>RGBA</title>
</head>

<body>

<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>

<p style="background-color:rgba(255,255,0,0.25)">
通过 rbg 值设置背景颜色
</p>

<p style="background-color:rgba(255,255,0,0.5)">
通过 rbg 值设置背景颜色
</p>

<p style="background-color:rgba(255,255,0,0.75)">
通过 rbg 值设置背景颜色
</p>

</body>

</html>

Web前端——HTML颜色_html_03

3. 颜色名

目前所有浏览器都支持以下颜色名。

141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值,包括十六进制值

17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色

​具体颜色见此网站​


标签:Web,颜色,十六进制,背景,前端,HTML,设置,rbg,255
From: https://blog.51cto.com/u_15923298/5970765

相关文章

  • Java Web开发环境配置
    一.安装Tomcattomcat提供了两种使用方式:安装版本和免安装版本(解压即可使用)1.下载​​Tomcat官方网站进行下载​​tar.gz是linux下的安装包2.解压解压完成就可以直接使用......
  • 32、webshell简介
    webshell就是以asp、php、jsp或者cgi等网页文件形式存在的一种命令执行环境,也可以将其称做为一种网页后门。一、eval,使用PHP函数,例如phpinfo()1、把下面内容写入1.php文件<?......
  • Vue2.00.WebPack
    本次系统学习以黑码教程为主,后期随笔中不特殊说明均为黑马教程内容01.对webpack的了解a.webpack是前端项目工程化的具体解决方案;b.主要功能:1.提......
  • 关于优化前端vue项目的思考
    背景:前端项目 125M启动时间5-10分钟F12会出现崩溃原因:打包出来的css样式文件体积过大解决办法:1.启动太久,将vue-cli升级到版本5,能优化不少的时间2.vue.conf......
  • 很实用的web性能测试插件:Yslow , PageSpeed
     packageorg.springframework.web.servlet.resource;importjava.io.IOException;importjava.io.UnsupportedEncodingException;importjava.net.URLDecoder;importjava......
  • spring-boot前端参数单位转换
     importjava.text.ParseException;importjava.text.SimpleDateFormat;importjava.util.Date;importjava.util.Locale;publicclassOldFormat{publicstaticvoid......
  • WebXR 技术调研 - 在浏览器中构建扩展现实(XR)应用【转】
    WebXR是一组支持将渲染3D场景用来呈现虚拟世界(虚拟现实,也称作VR)或将图形图像添加到现实世界(增强现实,也称作AR)的标准。通过该API可以访问VR/AR虚拟设备和跟踪用户姿......
  • 选题在线提交系统(html+JS+php)
    ​​在线选题系统完善篇(含后台管理)​​前言:    作为学习委员还是有挺多的事情要忙的,比如经常统计同学们的课设题目选择结果。如果老师的要求少一点,我还可以轻松一点......
  • 前端实现导入,导出功能
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="wid......
  • dolphin连接webdev
    title:dolphin连接webdevdescription:kde下使用dolphin连接坚果云date:2022-09-1010:46update:2022-09-1010:46tags:-applicationhead:--meta......