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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • TI C66x DSP 系统events及其应用 – 5.1(QM accumulator的配置)

    TI C66x DSP 系统events及其应用 – 5.1(QM accumulator的配置)

    2021年12月1日
    50
  • pycharm2021.11.3激活教程【中文破解版】「建议收藏」

    (pycharm2021.11.3激活教程)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html6EK6WKOHUX-eyJsaWNlbnNlSWQi…

    2022年3月28日
    45
  • Brup插件开发手记

    Brup插件开发手记前言在一些攻防演练中,像Shiro、Fastjson等常见高危漏洞一直被高频利用。但在一些情况下,这些漏洞通过几轮的洗刷下来出现的频率会逐渐变少。在打点的时候,一些平时并不会去

    2021年12月13日
    56
  • Fibers_fiber bundle

    Fibers_fiber bundle要理解Fibers首先需要对抢占式多任务和协作式多任务有所了解抢占式多任务抢占式是指暂停或中断正在执行的计算任务,而不是与其合作。中断后再继续恢复该任务的执行,这种改变又称为上下文切换。其缺点在于操作系统可能会在一个不适当的时间进行上下文切换。例如:Linux的调度程序特权任务Scheduler采用的就是取消进程任务,而不是与其合作。协作式多任务早期的多任务处理系…

    2025年8月21日
    3
  • Prometheus(普罗米修斯)监控系统「建议收藏」

    Prometheus(普罗米修斯)监控系统「建议收藏」Prometheus(普罗米修斯)是一套开源的监控&报警&时间序列数据库的组合,由SoundCloud公司开发。Prometheus基本原理是通过HTTP协议周期性抓取被监控组件的状态,这样做的好处是任意组件只要提供HTTP接口就可以接入监控系统,不需要任何SDK或者其他的集成过程。这样做非常适合虚拟化环境比如VM或者Docker。Prometheus应该是为数不多的适合Docker、Mesos、Kubernetes环境的监控系统之一。…

    2022年7月19日
    55
  • 数据同步工具

    数据同步工具公司要搞数据平台,首当其冲的是把旧库的数据导入到新库中,原本各种数据库大部分都提供了导入导出的工具,但是数据存储到各个地方,mongdb,hbase,mysql,oracle等各种各样的不同数据库,同步起来头都大了因此最近使用了一些数据同步工具,记录下来:离线导入导出DataX阿里的Datax是比较优秀的产品,基于python,提供各种数据村塾的读写插件,多线程执行,使用起…

    2022年6月28日
    29

发表回复

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

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