父元素设置透明度，不影响子元素

最新推荐文章于 2022-09-13 21:11:24 发布
最新推荐文章于 2022-09-13 21:11:24 发布
阅读量924 收藏 1
点赞数
分类专栏： css中的样式 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44202904/article/details/108622642
版权

给父元素设置透明度，并且不会影响子元素

在这里插入图片描述
需要实现的样式，如果对父元素使用background: #000; opacity: 0.6;会发现子元素也会有影响，即使我们对子元素设置opacity: 1，这时，我们需要使用background: rgba(0,0,0,0.6)就可以实现我们的要求

Ciao_Traveler
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS如何只改变父元素背景透明度不改变子元素透明度
09-25
使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即便重定义也没有用，不过有个方法可以实现，大家可以看看
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
1.复合选择器 （1）后代选择器（包含选择器 重要） 语法： 元素1 元素2 {样式声明} 选择器1 选择器2{ 属性：属性值 } 元素1和元素2用空格隔开 元素1父亲 元素2后代 最终改变的是后代（元素2）的样式 选择器可以是任意的基础选择器 （2）子元素选择器（子选择器 重要） 语法 元素1>元素2{样式声明} 元素1和元素2用>隔开 元素1和元素2是父子关系 只选择父元素最近一级的子元素 即必须是亲儿子 选择器1 选择器2可以是任意基础选择器 （3）并集选择器（重要） 可以选择多组标签 定义相同样式 通常用于集体声明 语法 元素1， 元素2{样式声明} 元素1和元素2都改了样式 逗号，为和的意思 任何选择器都可以作为并集选择器 约定的语法规范：并集选择器约定竖着写 最后一个选择器不需要加逗号， （4）交集选择器 语法 选择器1选择器2选择器3{ 属性： 属性值； } 用选择器1选择元素集合A，用选择器2在A中选择元素 标签名只能写在前面并且只能有一个标签 （5）伪类选择器（只用于链接 用：表示） a:link 未访问过的链接 a:visitied 已访问过的链接 a:hover 选择鼠标经过的链接/悬停时链接 a:active 选择的是鼠标正在按下没有弹起的链接 注意：按照LVHA的顺序写 链接在浏览器中有默认样式 所以一般需要单独指定 （6）焦点选择器（对input标签） 用于选取获得焦点（光标选中）的表单元素 语法 表单元素：focus{ 属性： 属性值； } 注意： 表单元素最常用的是input 在input框选中时显示的样式 2.css的元素显示模式 html元素一般分为块元素和行内元素 （1）块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③宽度默认是容器（父级元素）100%的宽度 ④是一个容器及盒子 里面看可以放行内或块级元素 ⑤文字类的元素如p h1-h6里面不能放块级元素 尤其是div （2）行内元素 a strong b em i del s ins u span ①相邻行内元素在一行上，一行可以显示多个 ②宽高直接设置是无效的 ③默认宽度就是他本身内容的宽度 ④行内元素只能容纳文本或其他行内元素 ⑤链接（a标签）里面不能再放链接 但可以放块级元素 比如图片 （3）行内块元素 img input td ①一行上可以有多个行内块元素 中间有空隙（行内元素特点） ②默认宽度就是他本身内容的宽度（行内元素特点） ③宽高 高度 外边距 内边距可以控制（块级元素特点） 元素显示模式的转换 （1）行内元素转块级元素 display：block；√ （2）块级元素转换为行内元素 display：inline； （3）行内块 元素 display：inline-block√、 单行文字垂直居中 文字的行高line-height=盒子高度 仅限于单行文字垂直居中 3.css的背景属性 （1）背景颜色 选择器{ background-color： transparent透明（透明）/color； } （2）背景图片（便于控制位置） 常用于logo 装饰性的小图片或者超大图片 background-image： none（默认） | url（图片地址/路径）; （3）背景平铺 background-repate: repate（默认） | no-repate | repate-x（沿x轴/横向平铺） | repate-y（沿y轴/纵向平铺）; 注意： 页面元素既可以添加背景颜色 也可以添加背景图片 只不过背景图片在背景颜色上方 即背景图片会压住背景颜色 （4）背景图片的位置 background-position: x y; ①参数是方位名词 top | center | bottom | left | center | right 方位名词 x（ left | center | right） y（top | center | bottom） background-position: 水平 垂直; background-position: center top ; background-position: top center ; 指定两个方位名词时 与顺序无关 指定一个方位名词时 没有指定的那个默认是居中对齐 ②参数是精确单位 前面x 后面y 顺序不可变 若第一个是精确单位 一定是x 则另一个垂直居中 ③混合单位 有顺序要求 第一个为x 第二个为y （5）背景固定 background-attachment: scroll | fixed ; （6）背景复合写法 background：颜色 图片地址url 平铺 滚动 位置 没有顺序要求 （7）背景色半透明 background：rgba（0,0,0,0.3）取值0-1 0.3也可以写成.3 背景色半透明 盒子里面内容不受影响
详解CSS-opacity子元素继承父元素透明度的解决方法
11-19
在写项目页面的过程中，遇到子元素继承父元素透明度的问题，查找了好多文档给出的都是第一种方法，这种方法主要解决简单场景的，而对于设置复杂的background时，该方法不再适用。
超级有影响力霸气的Java面试题大全文档
07-18
超级有影响力的Java面试题大全文档 1.抽象：　抽象就是忽略一个主题中与当前目标无关的那些方面，以便更充分地注意与当前目标有关的方面。抽象并不打算了解全部问题，而只是选择其中的一部分，暂时不用部分细节。抽象包括两个方面，一是过程抽象，二是数据抽象。 2.继承： 　继承是一种联结类的层次模型，并且允许和鼓励类的重用，它提供了一种明确表述共性的方法。对象的一个新类可以从现有的类中派生，这个过程称为类继承。新类继承了原始类的特性，新类称为原始类的派生类（子类），而原始类称为新类的基类（父类）。派生类可以从它的基类那里继承方法和实例变量，并且类可以修改或增加新的方法使之更适合特殊的需要。 3.封装： 　封装是把过程和数据包围起来，对数据的访问只能通过已定义的界面。面向对象计算始于这个基本概念，即现实世界可以被描绘成一系列完全自治、封装的对象，这些对象通过一个受保护的接口访问其他对象。 4. 多态性： 　多态性是指允许不同类的对象对同一消息作出响应。多态性包括参数化多态性和包含多态性。多态性语言具有灵活、抽象、行为共享、代码共享的优势，很好的解决了应用程序函数同名问题。 5、String是最基本的数据类型吗? 　基本数据类型包括byte、int、char、long、float、double、boolean和short。 　java.lang.String类是final类型的，因此不可以继承这个类、不能修改这个类。为了提高效率节省空间，我们应该用StringBuffer类 6、int 和 Integer 有什么区别 　Java 提供两种不同的类型：引用类型和原始类型（或内置类型）。Int是java的原始数据类型，Integer是java为int提供的封装类。Java为每个原始类型提供了封装类。 原始类型 封装类 boolean Boolean char Character byte Byte short Short int Integer long Long float Float double Double 　引用类型和原始类型的行为完全不同，并且它们具有不同的语义。引用类型和原始类型具有不同的特征和用法，它们包括：大小和速度问题，这种类型以哪种类型的数据结构存储，当引用类型和原始类型用作某个类的实例数据时所指定的缺省值。对象引用实例变量的缺省值为 null，而原始类型实例变量的缺省值与它们的类型有关。 7、String 和StringBuffer的区别 　JAVA平台提供了两个类：String和StringBuffer，它们可以储存和操作字符串，即包含多个字符的字符数据。这个String类提供了数值不可改变的字符串。而这个StringBuffer类提供的字符串进行修改。当你知道字符数据要改变的时候你就可以使用StringBuffer。典型地，你可以使用 StringBuffers来动态构造字符数据。 8、运行时异常与一般异常有何异同？ 　异常表示程序运行过程中可能出现的非正常状态，运行时异常表示虚拟机的通常操作中可能遇到的异常，是一种常见运行错误。java编译器要求方法必须声明抛出可能发生的非运行时异常，但是并不要求必须声明抛出未被捕获的运行时异常。 9、说出Servlet的生命周期，并说出Servlet和CGI的区别。 　Servlet被服务器实例化后，容器运行其init方法，请求到达时运行其service方法，service方法自动派遣运行与请求对应的doXXX方法（doGet，doPost）等，当服务器决定将实例销毁的时候调用其destroy方法。 与cgi的区别在于servlet处于服务器进程中，它通过多线程方式运行其service方法，一个实例可以服务于多个请求，并且其实例一般不会销毁，而CGI对每个请求都产生新的进程，服务完成后就销毁，所以效率上低于servlet。 10、说出ArrayList,Vector, LinkedList的存储性能和特性 　ArrayList 和Vector都是使用数组方式存储数据，此数组元素数大于实际存储的数据以便增加和插入元素，它们都允许直接按序号索引元素，但是插入元素要涉及数组元素移动等内存操作，所以索引数据快而插入数据慢，Vector由于使用了synchronized方法（线程安全），通常性能上较ArrayList差，而LinkedList使用双向链表实现存储，按序号索引数据需要进行前向或后向遍历，但是插入数据时只需要记录本项的前后项即可，所以插入速度较快。 11、EJB是基于哪些技术实现的？并说出SessionBean和EntityBean的区别，StatefulBean和StatelessBean的区别。 EJB包括Ses
1-19 改变父元素的透明度，不影响子元素的透明度
まどか
01-19 408
销户系统多券商开发 1.客户需要做一个挽留的modal，由于只有这家券商需要，暂时不封装成组件。写一个遮罩到页面即可 写在最外层并使用fixed布局即可 <div class="img-modal"> <img src="./assets/img/the-first.png" alt="" class="mask-img"> </div&
python元祖的介绍及操作方法
weixin_45666841的博客
01-18 306
元祖：python的元组与列表类似，不同之处在于元组的元素不能修改。元组使用小括号，列表使用方括号。 <1>访问元组 <2>修改元组 说明：python中不允许修改元组的数据，包括不能删除其中的元素。 <3>元组的内置函数count,index index和count与字符串和列表中的用法相同 index（有坑） <4>类型转换 字符串转换成元组，列表（元组，列表转换成字符串） ...
python元祖组成字典_简单谈谈Python中的元祖（Tuple）和字典（Dict）
weixin_39654619的博客
11-20 200
前言本文记录了对于Python的数据类型中元祖（Tuple）和字典（Dict）的一些认识，以及部分内置方法的介绍。下面话不多说，来看看详细的介绍吧。元祖 Tuple特点：元祖内的数据不可变一个元素的定义：T = （1，）>>> T=(1,)>>> type(T)特殊的元祖：”可变”的元祖>>> T=(1,2,3,[1,2,3])>>> T[3][2] = 'vimiix'>>> T(1, 2, 3...
解决父元素的透明度影响子元素的问题
weixin_38680881的博客
04-27 942
saas(sccs)、less、stylus三者的区别 最近在项目中遇到了一个关于透明度的问题，给父级设置透明度，使用（opacity),子级的正常样式会受到影响。 问题的解决 通过审查元素可以发现，子级继承了父级的opacity样式，从而影响了该有的样式； 给子级设置opacity为1，依然没有效果； 通过搜索引擎我们可以知道，opacity的样式会被子级继承，但rgba不会， 通过网上的工具就可以快速把十六进制的颜色样式转成rgb的样式,a的值和opacity的值保持一致 由此，问题得到了解决
Python核心数据类型——元祖、文件及其他
Gavin
11-17 2451
本文介绍了元祖的用法，包括括号和逗号的语法、元祖的不可变性和排序操作；介绍了文件对象，介绍了打开文件，读取文件和使用文件的方法；最后也提到了能够存储Python对象的pickle模块
python列表的添加的四种方式
weixin_43657383的博客
10-28 4万+
python列表的增删改1、list增加元素1.1 append（）1.2 extend（）1.3 insert（）1.4 切片 1、list增加元素 python中列表增加元素有四种方式： append()：在列表末尾添加一个元素 extend()：在列表末尾添加至少一个元素 insert()：在列表任意位置添加一个元素 切片：在列表任意位置添加至少一个元素 1.1 append（） 在列表末尾添加一个元素，该元素可以是str类型，int类型，或者列表对象 代码如下 lst = ["KO", "no"
CSS背景透明文字不透明或者子节点不透明
【大BUG】的博客
10-24 5706
原文链接：http://www.jufanshare.com/content/65.html 先上效果图，如下 . 三个列表是透明的，而文字和图标并未透明，实现代码如下 background-color: rgba(255, 255, 255, 0.15); 没错，就这一行代码就OK 背景颜色白色，但是不要使用16进制色，使用rgb色，因为rgb色可以设置透明度——rgb最后一个参数...
设置父视图的透明度与子视图的关系
。
12-18 538
一。设置父视图的透明度不影响子视图 baseView.backgroundColor = [[color6_0getColor] colorWithAlphaComponent:0.5]; 其中baseView为父视图 效果：（父视图颜色：[[UIColor redColor] colorWithAlphaComponent:0.5];        子视图颜色：[UIColo
Element：设置el-input宽度大小
热门推荐
科技向善
02-29 10万+
下方审批人输入框太长，导致界面像假村花东施 解决办法： 使用Layout中的col组件，并设置其span属性大小，span为24时，铺满赤道、为8时就是占1/3，其他以此类推。 ...
python元祖用法_Python中元祖的用法
weixin_31437187的博客
01-29 1160
元祖tuple(,)元祖就是不可变的列表，元祖用()表示,元素与元素之间用逗号隔开,数据类型没有限制。tu=('科比','詹姆斯','乔丹')tu=tuple('123')小括号中有一个元素,有逗号就是元祖,没有就是它本身。空的小括号就是元祖索引和切片与列表和字符串相同不可变指的是,第一层元素不可变元祖:() 只读列表，可循环查询，可切片儿子不能变孙子可能会变for i in range(...
[Python] 元组操作及方法总结
Hudas的博客
09-13 3852
本文主要讲解元组的概念及用法
python元祖
weixin_45303972的博客
09-10 495
一、定义元组 定义元组 t=(1,2,3,True,‘abc’) print(t) # 输出元组 print(‘元组t1的类型为：’,type(t)) # 查看类型 元组里包含可变数据类型，可以间接修改元组的内容 t1 = ([1,2,3],4)t1[0].append(4) # 给元组t1的第一个元素添加元素 print(t1) ...
浅谈设置父元素透明度不影响子元素透明度
筱葭的博客
03-15 1万+
设置父元素opacity：0.5，子元素不设置opacity，子元素会受到父元素opacity的影响，也会有0.5的透明度。 即使设置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.5的基础上设置的，因此子元素的opacity还是0.5。 解决方法：为父元素设置background: rgba(0,0,0,0.5)。
cocos2dx对所有子节点设置透明度
MOMO
05-04 1万+
看到cocos2dx2.2.5发布了，修复了输入框的bug，于是我们的项目也升级到了2.2.5， 升级过程还是比较顺利，没想到后来发现设置透明度无效了。 经过调试发现要调用一下setCascadeOpacityEnabled ( true )，结果还是没有效果， 又继续调试，原来noe没父节点不会更新自己的透明度，于是改为如下： void CCNode::setOpacity(
python3的数据类型的有序无序
雨林
02-12 7921
列表：可变，有序 字典：可变，无序 集合：可变，无序   数字：    不可变，有序 字符串：不可变，有序 元组：    不可变，有序   转载：https://www.cnblogs.com/z-x-y/p/10090749.html...
父盒子设置背景图片透明度导致子元素也透明了，怎么办
最新发布
05-28
可以尝试使用 CSS3 的 rgba() 函数来设置背景颜色和透明度，而不是直接设置背景图片的透明度。例如： ``` .parent { background-color: rgba(255, 255, 255, 0.5); /* 白色背景，透明度为 0.5 */ /* background-image: url('xxx.png'); 不设置背景图片透明度 */ } .child { /* 子元素不会受到背景透明度的影响 */ } ``` 其中，rgba() 函数中的前三个参数分别代表红、绿、蓝三色的取值（取值范围为 0~255），最后一个参数代表透明度（取值范围为 0~1）。这样设置可以保证父元素的背景图片不会影响子元素的透明度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值