首页前端开发CSScss里的rgb怎么用

css里的rgb怎么用

时间2024-01-27 19:08:03发布访客分类CSS浏览367
导读:收集整理的这篇文章主要介绍了css里的rgb怎么用,觉得挺不错的,现在分享给大家,也给大家做个参考。css里rgb的使用方法:首先创建一个HTML代码示例文件;然后通过rgb语法“rgb(red, green, blue ”来生成各式各样的...
收集整理的这篇文章主要介绍了css里的rgb怎么用,觉得挺不错的,现在分享给大家,也给大家做个参考。

css里rgb的使用方法:首先创建一个HTML代码示例文件;然后通过rgb语法“rgb(red, green, blue)”来生成各式各样的颜色即可。

本文操作环境:windows7系统、HTML5& & CSS3版,DELL G3电脑。

rgb是什么意思?

RGB:一种色彩模式 ,是工业界一种颜色标准;可以通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来获得到各式各样的颜色的。RGB 颜色标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

在css中我们可以采用RGB标准来设置颜色值,这就需要用到css rgb()函数。

css rgb()函数

rgb() 函数使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。

RGB 即红色、绿色、蓝色(英语:Red, Green, Blue)。

红色(R)0 到 255 间的整数,代表颜色中的红色成分。。

绿色(G)0 到 255 间的整数,代表颜色中的绿色成分。

蓝色(B)0 到 255 间的整数,代表颜色中的蓝色成分。

推荐:《css视频教程》

语法

rgb(red, green, blue)@H_777_43@

rgb()中的每个参数 (red、green以及 blue) 定义不同颜色的强度,可以是介于 0 与 255 之间的正整数,或者是百分比值(从 0% 到 100%)。

我们通过一个简单的代码示例来了解rgb()设置颜色的方法。

!DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
    style>
#p1 {
    background-color:rgb(255,0,0);
}
#p2 {
    background-color:rgb(0,255,0);
}
#P3 {
    background-color:rgb(0,0,255);
}
#p4 {
    background-color:rgb(192,192,192);
}
#p5 {
    background-color:rgb(255,255,0);
}
#p6 {
    background-color:rgb(255,0,255);
}
    /style>
    /head>
    body>
    p>
    RGB 颜色:/p>
    p id="p1">
    红色/p>
    p id="p2">
    绿色/p>
    p id="p3">
    蓝色/p>
    p id="p4">
    灰色/p>
    p id="p5">
    黄色/p>
    p id="p6">
    樱桃色/p>
    /body>
    /html>
    

效果图:

我们要注意一下rgb()颜色值的写法,下面的代码示例中rgb()函数的取值,有一些是对的,也有一些是错误的,注意区分:

/* 使用正整数的取值方法*/rgb(255, 0, 51)rgb(255, 0, 51.2) /* 错误的写法,不能是浮点数,必须为正整数*/ /* 使用%的取值方法*/rgb(100%, 0%, 20%)rgb(100%, 0, 20%) /* 错误的写法,不能混合使用整数和百分比值 */

以上就是css里的rgb怎么用的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: css li怎么水平居中对齐下一篇:css复合样式怎么做猜你在找的CSS相关文章 css怎么控制按钮不可用2022-05-17css3中transform属性实现的4种功能2022-04-13纯CSS3实现div按照顺序出入效果2022-04-13CSS实现隐藏搜索框功能(动画正反向序列)2022-04-13使用CSS3实现按钮悬停闪烁动态特效代码2022-04-13CSS3 Tab动画实例之背景切换动态效果2022-04-13CSS实现两列布局的N种方法2022-04-13CSS 实现Chrome标签栏的技巧2022-04-13css实现两栏布局左侧固定宽右侧自适应的多种方法2022-04-13从QQtabBar看css命名规范BEM的详细介绍2022-04-13 其他相关热搜词更多phpjavapython程序员

若转载请注明出处: css里的rgb怎么用
本文地址: https://pptw.com/jishu/588600.html
css复合样式怎么做 css li怎么水平居中对齐

游客 回复需填写必要信息