CSS3中如何解决子元素继承父元素的opacity属性[通俗易懂]

CSS3中如何解决子元素继承父元素的opacity属性[通俗易懂]问题css3中的opacity属性是用来设置div元素的不透明级别的,但是我们往往会遇到因为父级元素设定opacity后,子元素也跟着透明了,但是有时候我们只是想让背景是透明的,这该如何解决呢?错误的示例我们常常想到的方法是直接给子元素的opacity设定为1,如下:<!DOCTYPEhtml><html><head><metacharset=”utf-8″><title>opacity</title&g

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

问题

css3中的opacity属性是用来设置 div 元素的不透明级别的,但是我们往往会遇到因为父级元素设定opacity后,子元素也跟着透明了,但是有时候我们只是想让背景是透明的,这该如何解决呢?

错误的示例

我们常常想到的方法是直接给子元素的opacity设定为1,如下:

<!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: red;
  opacity: 0.5;
  }
 .opacity-child{
  position: relative;
  opacity: 1;
 }
  .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>

这样我们得到的是无效的:

在这里插入图片描述

那我们应该如何解决呢?

解决方案

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

使用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>

效果如下:

在这里插入图片描述

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

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

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

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

(0)
blank

相关推荐

  • pycharm中导入pandas_新电脑安装软件特别慢

    pycharm中导入pandas_新电脑安装软件特别慢pandas标红,导入库发现pandas库迟迟不能安装后网络寻找方法:进行换源找到ManageRepositories(如果找不到这个,可以查看我的《Pycharm2019安装第三方库》)点击“+”添加第二行点击OK若成功便会如下图会有两个url(注意pilapse只是个例子,你若没有也正常,重点是有pythontuna…)…

  • 博客园主题美化

    博客园主题美化

  • struts2的response的contentType设置

    struts2的response的contentType设置服务器端发送到客户端,提示保存还是打开?       response.setContentType(“text/html;charset=utf-8”)发送到客户端格式不正确。使用ajaxUpload插件的时候,strust2返回application/json格式的数据,但是ajaxUpload要求返回text/html,这样就需要在配置文件中配置contentType项。

  • SQL查询语句练习题27道

    练习环境为:XP+SQL2000数据库练习使用的数据库为:学生管理数据库数据库下载地址为:http://download.csdn.net/download/friendan/4648150说明        这是我在学习数据库课时,老师给的27道SELECT语句练习题,在写这篇文章时,老师并没有给参考答案,写这篇文章的目的完全是为了加深我对SQL语句的理解和方便我以后

  • c# TextBox

    c# TextBox1.text内容全选事件textBox1.selectAll();2.失去与获取焦点事件小诀窍:在输入+= 后,按两次Tab键,就会出现后面的

  • linux软链接的创建、删除和更新[通俗易懂]

    linux软链接的创建、删除和更新[通俗易懂]大家都知道,有的时候,我们为了省下空间,都会使用链接的方式来进行引用操作。同样的,在系统级别也有。在Windows系列中,我们称其为快捷方式,在Linux中我们称其为软链接(基本上都差不多了,其中可能有差别,但是那又怎样呢?我们只要实现我们的效果,谁会有精力去管它茴香的茴字有几种写法呢?)。Windows老姑娘的那几个姿势这里就不赘述了,我们今天主要说下Linux中的茴香的茴字怎么写。

发表回复

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

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