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


相关推荐

  • 死人现在在做死事「建议收藏」

    死人现在在做死事「建议收藏」现在和死人没什么差别了,今晚要对6000条数据进行整理,对这些数据进行分类本来应该是属于一个商业智能分类的事情,可公司里没一个会数据挖掘的,都对这堆数据没有办法,现在只能靠我们这些死人来死扛着,人工在对它进行分类,看来真是要得去西天看米罗佛去了看下这个数据,吓死你们客户来电反映本机在7811145/03…

    2022年10月7日
    2
  • SVN服务器安装 – Windows系统

    SVN服务器安装 – Windows系统Windows系统下SVN服务器搭建及遇到相关问题和处理方法记录

    2022年10月18日
    3
  • 反编译so库激活成功教程so

    反编译so库激活成功教程so所需工具1.IDA_Pro_v6.8_and_Hex-Rays_Decompiler_2.WinHex3.ARM_ASM背景:I2C通讯时报logCameraHal_Marvin:HAL-MOCKUP:HalReadI2CMem(1578):bus_num(7)orreg_addr_size(1)isinvalidateCameraHal_Marvin:…

    2022年6月16日
    39
  • 十五种文本编辑器

    十五种文本编辑器很多时候比如编程查看代码或者打开各种文档下我们都会用到文本编辑器,Windows自带的记事本功能很简陋并且打开大文件很慢,因此很多童鞋都会有自己喜欢的一款文本编辑器。在这里,西西挑选前15个最佳的文本编辑器,这些编辑器实际上主要适合程序员!如果觉得这些文本编辑器足够您的使用,欢迎点赞,如果还有更好的,可以给我们推荐哦。1.Notepad++中文版:这是Windows记事本一个最好…

    2022年5月1日
    66
  • Pyhton 单行、多行注释方法

    Pyhton 单行、多行注释方法

    2021年10月28日
    40
  • Java 程序员常用的开发工具

    Java 程序员常用的开发工具1、常用开发工具作为一名Java程序开发人员,可以的选择集成开发环境IDE(IntegratedDevelopmentEnvironment)非常多,得益于Java是一门开源语言。有开源免费的;有商用收费的。如何选择一款适合自己的集成开发环境,亦或说选择一款符合自己项目开发需要的集成开发环境。如果选择得当,那么就能够使得开发工作事半功倍;否则事倍而功半。 免费开源EclipseEclipse最…

    2022年7月7日
    30

发表回复

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

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