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)


相关推荐

  • java.io.outputstream_java input

    java.io.outputstream_java inputio流概述:IO流用来处理设备之间的数据传输,上传文件和下载文件,Java对数据的操作是通过流的方式,Java用于操作流的对象都在IO包中。IO流分类按照数据流向输入流读入数据输出流写出数据按照数据类型字节流字符流什么情况下使用哪种流呢?如果数据所在的文件通过windows自带的记事本打开并能读懂里面的内容,就用字符流,其他用字节流。如果你什么都…

  • wireshark过滤语法总结[通俗易懂]

    wireshark过滤语法总结[通俗易懂]做应用识别这一块经常要对应用产生的数据流量进行分析。抓包采用wireshark,提取特征时,要对session进行过滤,找到关键的stream,这里总结了wireshark过滤的基本语法,供自己以后参考。(脑子记不住东西)wireshark进行过滤时,按照过滤的语法可分为协议过滤和内容过滤。对标准协议,既支持粗粒度的过滤如HTTP,也支持细粒度的、依据协议属性值进行的过滤如tc

  • 永恒之蓝漏洞与勒索病毒Wannacry研究

    永恒之蓝漏洞与勒索病毒Wannacry研究永恒之蓝漏洞与Wannacry病毒家族

    2022年10月17日
  • Docker镜像相关命令

    Docker镜像相关命令1、查看docker版本 docker version 2、列出本地主机上的镜像: docker images REPOSITORY:表示镜像的仓库源 TAG:镜像的标签 IMAGE ID:镜像ID CREATED:镜像创建时间 SIZE:镜像大小3、查询镜像 docker search 镜像名称…

  • 单点登录原理与简单实现(单点登录原理与简单实现)

    单点登录(SingleSignOn),简称为SSO,是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。以下是个人查询资料的借鉴及对接某大型互联网公司单点系统后的一个总结和理解一、首先了解下单系统登录机制1、http无状态协议  web应用采用browser/server架构,http作为通信协议。http是无状态协…

  • MINI PCI-E接口_pcie接口原理图

    MINI PCI-E接口_pcie接口原理图1、PCIe3.0X4下图只用了2Lanes,pcie接口分x1、x4、x8、x16接口,向下兼容。含一对差分CLK时钟信号上图:pciex4引脚定义2、minipcie和msata接口一样minipcie和msata接口定义是一样的,可以相互交换使用。都是只有1对Tx和1对Rx,没有差分CLK时钟信号。下图是msata接口,常用于系统盘。上图:msata盘上图:minipcie引脚定义上图:msata引脚定义…

发表回复

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

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