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

目录

  • 前言
  • rgba() 函数 详解
  • 再分享一个小技巧哈哈哈

前言

今天在开发移动端的时候感觉没背景颜色有点丑,再加上自己做的是蛋糕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欢迎关注这个超级无敌可爱的人鸭,有什么问题留言私信皆可,看见必回!
创作不易,如有转载,请注明出处

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

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

相关文章

【工作总结】银行应用系统架构(一)

银行应用系统架构,听上去很复杂、很专业的内容,如何下笔想了很久。 不太想写成一个教科书一般的文章,那样写着轻松但是看着累,最关键的对语读者来说,不会有太大的收获。其实一个好的传授者,并不是要把知识…

你值得掌握的 Git分支等 常用命令 (持续更新中)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) Git分支一、本地1.1创建分支1.2切换分支1.3创建切换分支1.…

【工作总结】银行应用系统架构(二)

上一次我们介绍了什么是银行应用系统架构,为何要做应用系统架构的设计和规划。 这次开始,我们主要谈谈银行IT狗是如何规划应用系统架构的。 我们现在已经知道了,银行对老百姓的每个业务服务,后台都对应着相应的服务系统&#xff…

Appium+Python移动端 实战——教你如何xpath定位自动化测试

今日份问题 我:手动就可以操作简单的测试,为什么要自动化测试 老师:主要是回归测试。改了bug之后,重新再来测试。这样用回归测试就比手动测试要节约成本 AppiumPython移动端实战一、前提二、上实战一、前提 开启模拟器&#xff0…

【工作总结】银行应用系统架构(三)

上一次的文章中,介绍了银行应用系统的架构层次。如同人体的结构一样,是一个从宏观,逐渐细化到微观的过程(见下图)。 人体结构大致是这样的: 那么具体来分析,银行应用系统架构的每一层&#xff0…

黑盒测试 — 测试用例 之 判定表法看这一篇就够了

测试用例 之 判定表法一、应用场景二、判定表法定义三、步骤四、实战 — 案例分析一、应用场景 在一些数据处理问题中,逻辑条件取值的组合过多时,判定表是一个不错的选择! 二、判定表法定义 判定表通常由四个部分组成,如下: 意…

逻辑思维题一:条件组合覆盖

我们知道软件测试对测试人员的逻辑思维要求比较高,而且笔试时经常会出一些逻辑思维方面的问题,今天我们来看一个问题。题目是这样的:八瓶酒一瓶有毒,用人测试。每次测试结果8小时后才会得出,而你只有8个小时的时间。问…

《产品思维30讲》精华及感想

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 看了梁宁fairy大佬对产品思维的30讲及David,结…

【资讯】时间的朋友2017跨年演讲全回顾

2016年12月31日20:30,上海梅赛德斯奔驰文化中心,罗振宇“时间的朋友”跨年演讲如约而至。 罗胖曾发下大愿望:举办跨年演讲,连办二十年。今年,是倒数第十八场。 历时四个小时的演讲中,罗胖带着自己过去一年…

你值得掌握的Windows热键——原来高手都是这样玩电脑的!

2021年的开篇之作《你值得掌握的Windows的15个热键》和实用却冷门的几个电脑实用小技巧,再给大家分享一首敲级好听的歌——海龟先生的《男孩别哭》。很好听的旋律 哈哈哈。 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众…

【文章】人的好运从哪里来?

好运气是自己给的。 一、从好身体来 健康是福。有了健康的身体才有奋斗成功的本钱。要有健康身体,除了要注重饮食与运动外,还要正常的生活习惯。心理的健康也很重要。身心健康,就能顺利工作生活,迎着阳光,灿烂美好&…

带你一起学计算机专业英语!(IT行业、四六级党快记起来)《软件工程专业英语》第三单元:项目计划——单词、短语、名词缩写、难句

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) Professional English this subject test full score, the…

机器智能简史

序 在200年前,曾三次担任美国国务卿的政治家丹尼尔韦伯斯特,对革命性的蒸汽机作出了如下评价: 它可以开船、抽水、挖掘、载物、拖曳、举物、锤打、织布、印刷。它仿佛一个人,至少属于工匠阶级:“停止你的体力劳动&…

数据分析——切片器、数据透视表与数据透视图(职场必备)

在处理小量数据的时候,excel真是一个强大的武器,最近闲下来的时候就温习excel的数据处理,接下来来梳理一下切片器、数据透视表与数据透视图的使用重点,有任何不懂的可以马上私信我。近期也会更新像powerbi相关的东西,欢…

kex_exchange_identification: Connection closed by remote host Connection closed by 140.82.121.3 port

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 我在上传项目至远程仓库的时候遇到这样的问题 $ git push…

【文章】古人最睿智的十封“信”,写得如此通透!

第1封:写给相遇 相遇时难别亦难, 东风无力百花残。 ——李商隐 假如人生不曾相遇,自己就还是那个自己,日复一日地奔波,淹没在这个喧嚣的世间。 因为遇见了那些注定要遇见的人,自己不再是原来的自己&#…

测试开发——软件测试虚拟环境的搭建

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 前言:为什么要搭建python的虚拟环境&#xff1…

OpenCV 3.1 imwrite()函数写入异常问题解决方法

OpenCV 3.1 imwrite()函数写入异常问题解决方法最近配置了OpenCV3.1版本&#xff0c;按照2.x的习惯写了一个保存图片的代码&#xff08;测试证明该代码在2.4.11下运行正常&#xff09;&#xff0c;但是在使用imwrite()函数的时候出现了异常。 代码如下&#xff1a;#include <…

测试开发——搭建一个简单 web服务(flask框架基础)项目实战

搭建一个简单 web服务-flask框架一、什么是wsgi?二、搭建一个简单 web服务三、扩展四、请求加参数的情况五、安装flask一、什么是wsgi? wsgi是webserver和application的传话筒&#xff0c;起桥梁通信的作用。 二、搭建一个简单 web服务 # coding:utf-8# 步骤&#xff1a;…

高效阅读论文

写论文做研究的时候少不了要看论文&#xff0c;但是很多时候看过同类的论文之后发觉什么也没记住&#xff0c;本文将有三位牛人想大家分享他们在阅读论文的一些技巧&#xff0c;希望对大家有用。科研牛人一&#xff1a; 从Ph.D到现在工作半年,发了12 篇paper, 7 篇first author…