CSS中如何解决子元素继承父元素的opacity属性?

CSS中如何解决子元素继承父元素的opacity属性?解决方案这里有两个方案,使用rgba()间接的设定opacity的值,这个属性不会向下继承,或者既然opacity会被子级元素继承,那就把opacity属性放到同级元素实现,下面通过示例具体说说这两种方式:1.使用rgba()间接的设定opacityrgba()有四个参数,最后一个参数就是opacity的值,和opacity单独设定效果一样,但是这个是有background属性来控制的,background不会向下继承,所以就解决这个问题啦,示例如下:<!DOCTYPEhtml>&l

大家好,又见面了,我是你们的朋友全栈君。

解决方案

这里有两个方案,使用rgba()间接的设定opacity的值,这个属性不会向下继承,或者既然opacity会被子级元素继承,那就把opacity属性放到同级元素实现,下面通过示例具体说说这两种方式:

1.使用rgba()间接的设定opacity

rgba()有四个参数,最后一个参数就是opacity的值,和opacity单独设定效果一样,但是这个是有background属性来控制的,background不会向下继承,所以就解决这个问题啦,示例如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>opacity</title>
</head>
<style type="text/css">
 .opacity{
  position: relative;
  width: 400px;
  height: 300px;
  color: black;
  background: rgba(255,0,0,0.5);
 }
 .opacity-child{
 }
 .normal{
  width: 400px;
  height: 300px;
  background: red;
  color: black;
 }
 </style>
<body>
 <div class="opacity">
  <div class="opacity-child">子元素会继承父级元素的opacity属性</div>
 </div>
 <div class="normal">子元素会继承父级元素的opacity属性</div>
</body>
</html>

2.把opacity属性放到同级元素实现

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>opacity</title>
</head>
<style type="text/css">
 .opacity{
  position: relative;
  width: 400px;
  height: 300px;
  color: black;
  }
  .opacity-child{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
 }
  .opacity-child-background{
  position: absolute;
  top : 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: red;
  opacity: 0.5;
  z-index: 0;
 }
  .normal{
  width: 400px;
  height: 300px;
  background: red;
  color: black;
 }
 </style>
<body>
 <div class="opacity">
  <div class="opacity-child">子元素会继承父级元素的opacity属性</div>
  <div class="opacity-child-background"></div>
 </div>
 <div class="normal">子元素会继承父级元素的opacity属性</div>
</body>
</html>

3.透明实现的另一个技巧

filter:alpha(Opacity=0);
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/141620.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • JS中click事件

    JS中click事件今天在写Ajax请求代码时,js代码遇到了一点问题。最后还专门将一部分代码拷贝到webStorm里面测试,花了好久,发现是个坑。先贴一段代码:第一个按钮的点击事件没有任何反应。第二个按钮就会弹出“你好”。原因:这是因为我使用了click这个作为函数的名字,我在这几类中查询了一下,却没有发现click的踪影,而使用click作为函数名,浏览器既不报错,也不提示,真的很坑啊!类似还有open和clos…

  • 7. MyBatisCodeHelperPro 插件[通俗易懂]

    7. MyBatisCodeHelperPro 插件[通俗易懂]MyBatisCodeHelperPro插件       之前介绍了MyBatis的逆向工程生成实体类、自定义接口以及Mapper.xml的操作过程,很显然这样的配置工作非常繁琐且复杂,本文在介绍MyBatis动态SQL之前,先分享一款实用的MyBatisGenerator插件(MyBatisCodeHelperPro),使用这个插件可以简化开发过程,提高开发者的编码效率。第一步:File→Settings

  • scrapy+xpath爬取不可描述网站[通俗易懂]

    scrapy+xpath爬取不可描述网站[通俗易懂]今天来爬一个让人很有动力的网站,网址就不便放上来了,看看有没有有缘人能得知了还是先来items.pyimportscrapyclassAvmooItem(scrapy.Item):#definethefieldsforyouritemherelike:#name=scrapy.Field()name=scrapy.Field()

  • VS Code注释快捷键[通俗易懂]

    VS Code注释快捷键[通俗易懂]单行注释:Ctrl+/或先按CTRL+K,再按CTRL+U取消单行注释:Ctrl+/或先按CTRL+U,再按CTRL+K块注释Alt+Shift+A

  • PostgreSQL查询全角字符「建议收藏」

    PostgreSQL查询全角字符「建议收藏」PostgreSQL中~*的妙用PostgreSQL中可以使用~*进行模糊查询,同时会忽略大小写,在查询的条件中也会支持正则表达式。所以在查询全角字符的时候,可以使用正则表达式来来进行查询。select*from表名where字段~*'[A-Za-z0-9]’;使用上面SQL就可以查询出数据库中所有包含全角字符的数据了。…

  • c++解决大整数乘法

    c++解决大整数乘法c++解决大整数乘法问题描述:求两个不超过200位的非负整数的积输入数据:输入有两行,每行是一个不超过200位的非负整数,没有多余的前导0。输出要求:输出只一行,即相乘后的结果。结果里不能有多余的前导0,即如果结果是342,那么不能输出0342。输入样例:1234567890098765432100输出样例:1219326311126352690000解题思路:采用列乘法竖式的求解思路,采用数组…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号