CSS3 opacity属性

CSS3 opacity属性CSS3opacity属性记录设置一个div元素的透明度级别实现原理:opacity属性在实现的原理上极度类似于PS中的蒙版概念样式:div{opacity:0.5;}取值范围:0~1注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=50)属性说明默认值:1继承性:no(不继承)版本:CSS3属性:object.style.opacity问题1.如果父元素设置opacity属性,那么这个的所有子元素都

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

CSS3 opacity属性记录

设置一个div元素的透明度级别

实现原理:

opacity属性在实现的原理上极度类似于PS中的蒙版概念

样式:

div{
    opacity:0.5;
}

取值范围: 0 ~ 1

注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=50)

属性说明

  • 默认值:1
  • 继承性:no(不继承)
  • 版本:CSS3
  • 属性:object.style.opacity

问题

1.如果父元素设置opacity属性,那么这个的所有子元素都会受影响(继承)并且无法位子元素(opacity:1)的方法来改变子元素的这个属性。

解决方法:

  • 设置rgba属性:background-color:rgba(0,0,0,.5)。
  • 父元素div(设置为相对定位),子元素div1(设置为绝对定位)背景正常加透明度即可,子元素div2(设置为绝对定位),层级关系高于div1

2.父子关系间,opacity不受index影响,但是,兄弟关系间opacity受index影响,若opacity;0.5的元素index属性最大,则会影响兄弟关系的显示(此处用了一个大佬的引用,地址在最下方)

在这里插入图片描述
在这里插入图片描述
总结:

  • 虽然opacity没有继承性,子元素的opacity属性为默认值,但是会受到父元素的影响(蒙版效果影响)
  • opacity兄弟之间会因为index的层级产生影响

学习链接:

  • https://blog.csdn.net/baidu_39068138/article/details/109163308?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/141314.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java中的重载、重写和重构的区别

    Java中的重载、重写和重构的区别1、重载重载(overloaded):重载就是在同一个类中允许同时存在一个以上的同名方法,只要这些方法的参数个数或类型不同即可。我们知道构造方法的名称已经由类名决定,所以构造方法只有一个名称,但如果希望以不同的方式来实例化对象,就需要使用多个构造方法来完成。由于这些构造方法都需要根据类名进行命名,为了让方法名相同而形参不同的构造方法同时存在,必须用到“方法重载”,虽然方法重载起源于构造方…

    2022年7月8日
    19
  • 一些好玩的cmd命令_好玩cmd命令

    一些好玩的cmd命令_好玩cmd命令前言:CMD是什么?在windows环境下,命令行程序为cmd.exe。是一个32位的命令行程序,微软Windows系统基于Windows上的命令解释程序。类似于微软的DOS操作系统。输入一些命令,cmd.exe可以执行。比如输入shutdown-s就会在30秒后关机。总之,它非常有用。很多朋友往往都对黑客比较崇拜,其实黑客也只是比我们知道更多一些我们所不了解的电脑相关命令。在使用中…

    2022年9月22日
    0
  • 接口-DAO模式代码阅读及应用

    接口-DAO模式代码阅读及应用

    2021年10月6日
    51
  • 安全帽识别 安全帽佩戴识别 安全帽检测 安全帽分类 yolo安全帽识别

    安全帽识别 安全帽佩戴识别 安全帽检测 安全帽分类 yolo安全帽识别基于深度学习的安全帽佩戴检测安全帽识别安全帽检测安全帽分类yolo安全帽识别yolo安全帽tinyyolo安全帽识别安卓安全帽识别c++安全帽识别源码交流加wxdeeplearning_gogogo效果很棒,不服来战换不多说,奉上效果图…

    2022年5月19日
    38
  • RAID0、RAID1、RAID5、RAID6、RAID10、RAID50的异同与应用

    RAID0、RAID1、RAID5、RAID6、RAID10、RAID50的异同与应用独立磁盘冗余阵列磁盘阵列(RedundantArraysofIndependentDisks,RAID),有“独立磁盘构成的具有冗余能力的阵列”的含义。其思想是将多块独立的磁盘按不同的方式组合为一个逻辑磁盘,从而提高存储容量,提升存储性能或提供数据备份功能。RAID存储系统的组合方式根据RAID级别定义。RAID根据组合方式的不同,有多种设计方案,以下介绍几种常见的RAID方案。1、RAID0(不含校验与冗余的条带存储)2、RAID1(不含校验的镜像存储)3、RAID5(数据块级别的分.

    2022年7月25日
    22
  • VBoxGuestAdditions加载不了

    VBoxGuestAdditions加载不了未能加载虚拟光盘D:\ProgramFiles(x86)\oraclevm\VBoxGuestAdditions.iso到虚拟电脑centeros7_8.Couldnotmountthemedia/drive’D:\ProgramFiles(x86)\oraclevm\VBoxGuestAdditions.iso'(VERR_PDM_MEDIA_LOCKED).返回代码: E_FAIL(0x80004005) 组件: ConsoleWrap 界…

    2022年6月16日
    138

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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