CSS实现透明度效果的两种方法—— opacity 和 rgba()

在实际开发过程中,为了给用户呈现一些效果,我们需要控制元素的透明度。CSS 提供了 opacity 属性和 rgba() 函数给我们控制透明度,接下来通过一个例子来感受一下两种方法的区别。

<style>
  .transparentBox {
		display: inline-block;
		width: 100px;
		height: 100px;
		margin: 20px;
		color: #FFF;
		text-align: center;
		background-color: rgb(250, 179, 1);
		position: relative;
  }
  .transparentBox > div {
		width: 50px;
		height: 50px;
		line-height: 50px;
		background-color: rgb(210, 105, 30);
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -25px;
		margin-left: -25px;
    }
</style>
<div class="transparentBox">
	<div>111</div>
</div>

在这里插入图片描述

opacity 属性

opacity 属性可以设置一个元素的不透明度。语法如下。

opacity: alpha;
alpha 取值范围为 0~1,值越小越透明( 0 表示完全透明,1 表示完全不透明 ),任何一个溢出这个取值区间的值都会被解析为在取值范围内最靠近它的值

IE8 或者更早版本的 IE 浏览器不支持 opacity 属性,若想要在这些浏览器中实现透明效果可以使用 filter 属性,语法格式如下:

filter: alpha(opacity=number);
number 的取值范围为 0~100,值越小则越透明( 0 表示完全透明,100 表示完全不透明 )

为了让所有浏览器都可以实现透明效果,我们可以同时定义 opacity 和 filter 两个属性,如下

div {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

下面给最外层盒子设置 opacity 属性,看看有什么效果。

.transparentBox {
	opacity: 0.5;
}

在这里插入图片描述
可以看到中间盒子的透明度也被改变了,这也证实了 opacity 属性会影响子元素。此时子元素没有设置 opacity 属性,直接继承了父元素的,所以也是 0.5。如果给子元素也设置 opacity 属性会怎么样?

.transparentBox > div {
	opacity: 1;	/* 依次设为 1、 0.5、 0,观察效果 */
}

子元素 opacity: 1 的效果跟上面是一样的,但是设置比 1 小的值时,子元素有了不同的表现。

在这里插入图片描述
由上可知,opacity 属性具有继承性,当它被应用于某个元素上时,这个元素包括它的内容都被当成一个整体看待。一个元素和它的子元素(包括文本、边框、背景色等)都会具有相同的透明度,不过对于它的子元素还有以下两个要点。

  1. 子元素会直接继承父元素的透明度。子元素不设置 opacity 时,会受到父元素 opacity 的影响,拥有与父元素相同的透明度。
  2. 子元素的透明度是基于父元素的透明度计算的​。子元素 opacity 设为 1 时,父元素的影响依然在,所以在上面的例子中,没有任何变化;设为 0.5 时,相当于在父元素 0.5 的基础上再叠加了一层 0.5 的透明度,看上去更不透明了。

注意:opacity: 0 的元素在页面上肉眼不可见,像是“隐身”了,但 DOM 结构依然存在,所以在页面上仍然占据空间,因此在元素上绑定的事件也能被正常触发。

有时候我们想让子元素摆脱父元素的控制,给父元素单独设置透明度该怎么做?CSS 函数 rgba() 支持这样的做法。

rgba() 函数

rgba() 函数根据颜色的红色、绿色和蓝色成分来表达颜色,可选的 alpha 参数设置颜色的透明度。语法如下。

rgba(r, g, b, alpha)
R、G、B
每个都是从 0 到 255 之间的整数,或从 0% 到 100% 之间的 百分比,或者为关键字 none,分别代表红色、绿色和蓝色的通道。
A 可选
alpha 值(可以是百分比或0~1之间的数字)或者关键字 none,数字 1 对应 100%(完全不透明)。

下面给最外层盒子设置一个带透明度的背景色

.transparentBox {
	background-color: rgba(250, 179, 1, 0.5);
}

在这里插入图片描述
可以看到只是最外层盒子的背景颜色改变了,里面的盒子不受影响。有了 rgba() 我们可以更精确地控制颜色和它的透明度,而且不会影响子元素,不像 opacity 属性那样有继承性,对整体都有影响。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

文生图模型评测之PickScore

文章目录 1. 简介2. 构建数据集2.1 Pick-a-Pic web App2.2 Pick-a-Pic Dataset3. PickScore3.1.1模型结构和损失函数3.2 模型训练3.3 验证模型4. 作用4.1 作为验证模型的验证集4.2 用于模型选择5. 小结论文链接:Pick-a-Pic: An Open Dataset of User Preferences for Text-to-…

LinuxMySql

结构化查询语言 DDL&#xff08;数据定义语言&#xff09; 删除数据库drop database DbName; 创建数据库create database DbName; 使用数据库use DbName; 查看创建数据库语句以及字符编码show create database 43th; 修改数据库属性&#xff08;字符编码改为gbk&#xff09;…

Python教程之字典(Dictionary)操作详解

文章目录 前言一、创建字典二、访问字典里的值三、访问字典里的值四、删除字典元素五、字典键的特性六、字典内置函数&方法七、字典练习代码关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Py…

docker---dockerfile相关知识

第 3 章 Docker 高级实践 在这一部分我们主要来介绍一些Docker的高级内容&#xff1a; Dockerfile 和 Docker compose 3.1 Dockerfile Dockerfile我们从下面的几个方面来介绍&#xff1a; Dockerfile简介 Dockerfile快速入门 Dockerfile详解 Dockerfile简单 实践 3.1.1 Docke…

JavaEE平台技术——预备知识(Maven、Docker)

JavaEE平台技术——预备知识&#xff08;Maven、Docker&#xff09; 1. Maven2. Docker 在观看这个之前&#xff0c;大家请查阅前序内容。 &#x1f600;JavaEE的渊源 &#x1f600;&#x1f600;JavaEE平台技术——预备知识&#xff08;Web、Sevlet、Tomcat&#xff09; 1. M…

Canal

canal译意为水道/管道/沟渠&#xff0c;主要用途是基于 MySQL 数据库增量日志解析&#xff0c;提供增量数据订阅和消费。 1.canal 工作原理 canal 模拟 MySQL slave 的交互协议&#xff0c;伪装自己为 MySQL slave &#xff0c;向 MySQL master 发送dump 协议MySQL master 收到…

mac 安装 selenium + chrome driver

前言 使用 selenium 模拟浏览器渲染数据&#xff0c;需要依赖各浏览器的驱动才能完成&#xff0c;因此需要单独安装chrome driver 查看本地 chrome 浏览器的版本 可以看到我这里已经是 arm 架构下最新的版本了 下载对应的 chrome driver 访问下面的地址&#xff1a; Chrome…

Redis7--基础篇2(Redis的十大数据类型及常用命令)

1. Redis的十大数据类型及常用命令 Redis是key-value键值对类型的数据库&#xff0c;我们所说的数据类型指的是value的数据类型&#xff0c;key的数据类型都是字符串。 1.1 字符串&#xff08;String&#xff09; string是redis最基本的类型&#xff0c;一个key对应一个val…

easyscholar配置秘钥连接Zotero-style,更方便的了解文献!

如果你不知道什么是easyScholar,以及怎么安装easyScholar? 请参见文章 easyScholar 一、easyscholar配置秘钥 1.首先打开easyscholar插件&#xff0c;并登录 2.点击自定义数据集 3.依次点击 用户信息-开放接口 4.点击刷新 5.在Zoter中 编辑-首选项-高级-编辑器 6.点击…

[C]环境(0/0)→ 环境配置

这里写目录标题 0x00 额环境下载解压 0x00 额 写了那么多C的入门&#xff0c;就是没写C语言的环境配置&#xff0c;乘此机会写了吧。 环境下载 直接在我这下载就好了&#xff0c;毕竟用了挺久没啥问题的 C语言环境&#xff08;gcc version 8.1.0&#xff09; 解压 最后得到…

快速构建高质量中文APP登录注册页面Figma源文件

在这个数字化时代&#xff0c;移动应用程序&#xff08;APP&#xff09;已经成为我们日常生活中不可或缺的一部分。如果您正在为您的中文APP开发登录注册页面&#xff0c;并寻找高质量的UI设计素材&#xff0c;那么您来对地方了&#xff01;我们为您提供了一个完整的Figma源文件…

解答开发转软件测试岗的困惑

有个知乎网友做了一年的软件开发&#xff0c;打算转软件测试&#xff0c;但是面试了几家都没有回音&#xff0c;希望大家能给一点建议。 由于这个问题不是今年提的&#xff0c;所以不用担心知友是受到了疫情的影响&#xff0c;单纯应该是个人的问题。 因为他只做了一年开发就想…

Redis 扩展 RedisBloom 插件,解决缓存击穿、穿透

文章目录 一、概述二、编译准备2.1 升级 make2.2 安装 Python3 三、编译 RedisBloom四、测试 RedisBloom五、应用场景5.1 缓存击穿5.2 缓存穿透5.3 原理总结 六、存在的问题 如果您对Redis的了解不够深入请关注本栏目&#xff0c;本栏目包括Redis安装&#xff0c;Redis配置文件…

【tgcalls】Instance接口的实例类的创建

tg 里有多个版本,因此设计了版本管理的map,每次可以选择一个版本进行实例创建这样,每个客户端就可以定制开发了。tg使用了c++20创建是要传递一个描述者,里面是上下文信息 G:\CDN\P2P-DEV\tdesktop-offical\Telegram\ThirdParty\tgcalls\tgcalls\Instance.cpp可以看到竟然是…

js获取地址中携带的省市区

match() 方法可在字符串内检索指定的值&#xff0c;或找到一个或多个正则表达式的匹配。 match() 方法将检索字符串 String Object&#xff0c;以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g&#x…

带有滑动菜单指示器的纯 CSS 导航选项卡

效果展示 CSS 知识点 filter 属性回顾 transition 属性回顾 使用单选框实现导航菜单的思路 单选框当点击完成后就会有一个:checked属性&#xff0c;可以利用这个属性来实现导航菜单底部滑动块的滑动动画和当前菜单项激活状态的管理。 整体页面结构 <div class"tab…

ZZ308 物联网应用与服务赛题第F套

2023年全国职业院校技能大赛 中职组 物联网应用与服务 任 务 书 &#xff08;F卷&#xff09; 赛位号&#xff1a;______________ 竞赛须知 一、注意事项 1.检查硬件设备、电脑设备是否正常。检查竞赛所需的各项设备、软件和竞赛材料等&#xff1b; 2.竞赛任务中所使用…

【Royalty in Wind 2.0.0】个人体测计算、资料分享小程序

前言 Royalty in Wind 是我个人制作的一个工具类小程序。主要涵盖体测计算器、个人学习资料分享等功能。这个小程序在2022年第一次发布&#xff0c;不过后来因为一些原因暂时搁置。现在准备作为我个人的小程序重新投入使用XD PS&#xff1a;小程序开发部分我是在21年跟随郄培…

配置Linux为无线路由器

配置Linux无线路由器 将Linux配置为无线路由器。使用hostapd&#xff0c;可以配置无线网卡为AP模式。 这里使用buildroot来生成这个工具。Wi-Fi模块使用的是 rt8188eus。 1. 内核配置 2. buildroot配置 开启 rt8188eus 驱动 3. 启动hostapd 系统启动后&#xff0c;会自动加…

innovus:set_ccopt_property基本用法备忘录(中)

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 insertion_delay insertion delay的作用是指导clock tree做长或做短。具体可以看以下文章:innovus set_ccopt_property insertion_delay insertion_delay的设置的来源有三个…