前言

今天在开发移动端的时候感觉没背景颜色有点丑，再加上自己做的是蛋糕app，觉得暖色应该会很好看，于是就用了这行代码

background-color: rgba(255,192,203,0.2);

实现的效果如图：

接下来就介绍如何使用css中的 rgba() 函数

rgba() 函数详解

rgba() 函数使用红®、绿(g)、蓝(b)、透明度(a)的叠加来生成各式各样的颜色。

rgba 即红色、绿色、蓝色、透明度（red, green, blue, alpha）
在对应的位置就代表对应的颜色以及透明度

红色（r）0 到 255 间的整数，代表颜色中的红色成分
绿色（g）0 到 255 间的整数，代表颜色中的绿色成分
蓝色（b）0 到 255 间的整数，代表颜色中的蓝色成分
透明度（a）取值 0~1 之间，代表透明度

例如：

background-color:rgba(255,0,0,0.5); //红色background-color:rgba(0,255,0,0.5); //绿色background-color:rgba(0,0,255,0.5); //蓝色background-color: rgba(255, 255, 255, 0); //则表示完全透明的白色background-color: rgba(0, 0, 0, 1); //则表示完全不透明度的黑色

https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

再分享一个小技巧哈哈哈

如果你想知道你想要的颜色换成RGB颜色值

比如说我看上了这个小可爱的头发颜色的色号
于是我就Ctrl+Alt+A,然后按C复制色号

然后再粘贴出来就是这个色号的RGB值了例如我的：243,218,222

前提是你要开启QQ了哈哈哈哈

https://blog.csdn.net/hanhanwanghaha欢迎关注这个超级无敌可爱的人鸭，有什么问题留言私信皆可，看见必回！
创作不易，如有转载，请注明出处

前端如何设置背景颜色的透明度 css中的 rgba() 函数详解：background-color: rgba(255,192,203,0.3)相关推荐

php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
vue 设置背景颜色及透明度
如上图,如果是第一张图片,需要在左上角加上灰色背景,白色"封面"字样,背景色需要有透明度. 首先,需要知道rgba() 函数. rgba() 函数使用红(R).绿(G).蓝(B). ...
html页边距为负值,css中的padding属性可以为负值吗？css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧首先我们介绍的是第一个问题 ...
html中的em等于多少像素,CSS中的em运用详解，1em等于多少像素？
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...
css中伪类选择器详解(a:visited不生效的原因)
css伪类是一种css定义的方法,主要用于对链接显示效果的定义, 主要包括: a:link :链接平常的状态. a:visited:链接被访问之后的状态. a:hover:鼠标停留在链接上的状态. a ...
HTML/CSS中文本text属性详解
我们可以通过添加一些HTML标记和CSS属性来设置text文本的样式. HTML中的标记包括结构化标记和语义化标记两种,结构化标记简单来说是用来标记标题和段落的,而语义化标记则是不会影响到网页的结构. ...

前端如何设置背景颜色的透明度 css中的 rgba() 函数详解：background-color: rgba(255,192,203,0.3)

目录

前言

rgba() 函数详解

再分享一个小技巧哈哈哈

前端如何设置背景颜色的透明度 css中的 rgba() 函数详解：background-color: rgba(255,192,203,0.3)相关推荐

最新文章

热门文章

前端如何设置背景颜色的透明度 css中的 rgba() 函数详解 ：background-color: rgba(255,192,203,0.3)

目录

前言

rgba() 函数 详解

再分享一个小技巧哈哈哈

前端如何设置背景颜色的透明度 css中的 rgba() 函数详解 ：background-color: rgba(255,192,203,0.3)相关推荐

最新文章

热门文章

前端如何设置背景颜色的透明度 css中的 rgba() 函数详解：background-color: rgba(255,192,203,0.3)

rgba() 函数详解

前端如何设置背景颜色的透明度 css中的 rgba() 函数详解：background-color: rgba(255,192,203,0.3)相关推荐