css透明度怎么写_css设置颜色透明度

rgba和opacity的使用

1、opacity

取值在0到1之间,0表示完全透明,1表示完全不透明。

.aa{opacity: 0.5;}

2、rgba

rgba中的R表示红色,G表示绿色,B表示蓝色,三种颜色的值都可以是正整数或百分数。

A表示Alpha透明度,取值0~1之间,类似opacity。

.aa{background: rgba(255,0,0,0.5);}

rgba和opacity的区别

rgba()和opacity都能实现透明效果,最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)。

比如,我们写透明的黑色部分都是用opcity(0.5),但这带出来一个问题就是如果你在这一div上写字的话,然后那个字体也会变成透明色。

所以我们要采取rgba的样式写,前面三个数字分别对应r,g,b这三种颜色,第四位的数字对应的是透明的系数。

举例:

给外面一个div红色背景,并设置它的透明度为0.5,给里面的div颜色为绿色,并加上文字。

代码如下:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .a1{width: 200px;height: 200px;background: red;opacity: 0.5;} .a2{width: 200px;height: 50px;background: #008000;font-size: 30px;} </style> </head> <body> <div class="a1"> <div class="a2">今天心情不好</div> </div> </body> </html>

效果如图:

css透明度怎么写_css设置颜色透明度

看图显而易见,给外面的div设置了opacity为0.5后,里面的div和文字的透明度都改变了。

这肯定不是我们想要看到的,我们用rgba设置透明度,看看效果,其他代码不变,只将外面div的opacity换成rgba。

.a1{width: 200px;height: 200px;background: rgba(255,0,0,0.5);}

效果如图:

css透明度怎么写_css设置颜色透明度

看看,这个是不是正常了。

一句话总结:

opacity会继承父元素的 opacity 属性,rgba不会继承。

本文【css透明度怎么写_css设置颜色透明度】由作者: B/S结构 提供,本站不拥有所有权,只提供储存服务,如有侵权,联系删除!
本文链接:https://www.cuoshuo.com/blog/4126.html

(0)
上一篇 2023-03-09 08:08:32
下一篇 2023-03-09 08:40:32

相关推荐

  • 1271是什么意思

    1271年,也就是至元八年,忽必烈建国号为大元,确定了以大都为首都。忽必烈是托雷第四个儿子,蒙哥的弟弟,他在蒙哥的同母弟中“最长且贤”。蒙哥对这个弟弟非常重视,他成为大汗后,让忽必烈总理漠南汉地军国庶事。 忽必烈与很多蒙哥贵族不同,他还在潜邸时,就已结识中原文士,聚集了一大批以汉族为主的知识分子,成为忽必烈的幕僚。 所以别看忽必烈在早期并没有干什么轰天动地的…

    2023-03-13
    500
  • 二进制文件损坏怎么修复

    如果您不想将工件上传到公共存储库,或者如果您在未连接到公共存储库的私有网络上工作,则需要能够将依赖项离线存储在私有存储库中并在本地推送或拉取它们。 根据维基百科,二进制存储库管理器 (BRM)是“一种软件工具,旨在优化软件开发中使用和生成的二进制文件的下载和存储”,例如 .jar、.tar 或 .zip 档案。作为大多数DevOps 工具链的关键组件,BRM…

    2023-03-11
    300
  • vb 数据库 大批量 快速 导入

    【分享成果,随喜正能量】 一个人如果怕吃苦、怕吃亏,则成就有限。每件事情的成功,都是有过程的,就是要耐烦、耐久、耐屈、耐苦。。 《VBA数据库解决方案》教程是我推出的第二套教程,目前已经是第一版修订了。这套教程定位于中级,是学完字典后的另一个专题讲解。数据库是数据处理的利器,教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法和实例操作,教程第一版的修…

    2023-03-16
    100
  • linux认证考试报名时间

    昨日,记者从温州市教育考试院获悉,温州市2023年上半年全国计算机等级考试(以下简称NCRE)将于3月25日至26日进行,报名时间为2月27日9时至3月3日17时。 考试采取网上报名的方式,考生登录https://ncre-bm.neea.cn或https://ncre-bm.neea.edu.cn ,选择“浙江省(温州市)”进行报名。 2023年继续暂停三…

    2023-03-16
    400
  • mysql存储过程打印输出_mysql存储过程返回结果集

    目录 二:MySQL存储过程变量及赋值 三:MySQL存储过程的创建 2. 使用navicat创建一个存储过程 3. 存储过程中的参数:IN OUT INOUT 四:MySQL存储过程的管理 1. MySQL存储过程的查询 2. MySQL存储过程的修改 3. MySQL存储过程的删除 五:MySQL存储过程的控制语句 3.1 while…end…

    2023-03-09
    400
  • linux文本编辑器有哪些_linux文本编辑器vi

    《大数据和人工智能交流》头条号向广大初学者新增C 、Java 、Python 、Scala、javascript 等目前流行的计算机、大数据编程语言,希望大家以后关注本头条号更多的内容。 vi是linux的文本编辑器,vim是vi编辑器的增强版本,习惯上也称为vi 一、vi编辑器的工作模式 vi编辑器有命令模式、输入模式、末行模式,我们通过"vi …

    2023-03-08
    1100
  • html文本框前面怎么添加文字

    文本格式标记 以下HTML标记用于格式化网页上文本的外观。这可以使网页变得更加生动,但是,文本格式的太多变化也会使人不快。 标题 – <head> </head> head标记有6个级别可用,从h1用于最大和最重要的标题,到h6是最小的标题。 粗体 – <b> </b> b标记之间的文本…

    2023-03-11
    000
  • remount命令_linux查看挂载信息命令

    挂载概述 在linux当中所有的存储设备如u盘、光盘、硬盘等,都必须挂载之后才能正常使用。 其实挂载可以理解为windows当中的分配盘符,只不过windows当中是以英文字母ABCD等作为盘符,而linux是拿系统目录作为盘符,当然linux当中也不叫盘符,而是称为挂载点,而把为分区或者光盘等存储设备分配一个挂载点的过程称为挂载。 在安装linux系统时设…

    2023-03-09
    1200
  • 计算机二级c语言是笔试还是机考

    全国计算机等级考试NCRE是经过教育局批准,由教育部考试中心举办,面向社会,用来考察应试人员计算机应用知识与技能的全国性计算机水平考试。NCRE在全国范围内每年举办两次考试,考试时间一般安排在3月最后一个周六至下周周一、9月倒数第二个周六至下周周一。 那你了解计算机等级考试吗? 一、考试级别 全国计算机等级考试分了四个级别,分别为一级、二级、三级、四级四个级…

    2023-03-11
    600
  • python的readlines函数_python中readlines

    一、Python绝对路径和相对路径 明确一个文件所在的路径,有 2 种表示方式,分别是: ◆绝对路径:总是从根文件夹开始,Window 系统中以盘符(C:、D:)作为根文件夹,而 OS X 或者 Linux 系统中以 / 作为根文件夹。 ◆ 相对路径:指的是文件相对于当前工作目录所在的位置。例如,当前工作目录为 "C:\Windows\System…

    2023-03-10
    400

发表回复

登录后才能评论
返回顶部
错说博客上线啦!