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


相关推荐

  • 一步到位分布式开发Zookeeper实现集群管理

    一步到位分布式开发Zookeeper实现集群管理

    2022年3月12日
    54
  • J2EE是什么意思_main()函数是java程序的执行入口

    J2EE是什么意思_main()函数是java程序的执行入口j2ee   J2EE简介  J2EEJava2平台企业版(Java2Platform,EnterpriseEdition)   J2EE是一套全然不同于传统应用开发的技术架构,包含许多组件,主要可简化且规范应用系统的开发与部署,进而提高可移植性、安全与再用价值。   J2EE核心是一组技术规范与指南,其中所包含的各类组件、服务架构及技术层次,均有共通的标准及规格,让各种依

    2022年10月11日
    0
  • String和JSON互转,String生成JSONObject和JSONArray[通俗易懂]

    String和JSON互转,String生成JSONObject和JSONArray[通俗易懂]一、String转JSONvarstr='[{"name":"12"}]’;varjson1=eval(‘(‘+str+’)’);varjson2=JSON.parse(str);这个JSON.parse()与eval()都可以实现,但是它们是有区别的:JSON.parse对json字符串要求比eval()更为严格,key名称(例如name)全部必须有双引号。

    2022年8月23日
    55
  • php基础设计模式(注册树模式、工厂模式、单列模式)

    php基础设计模式(注册树模式、工厂模式、单列模式)

    2021年11月6日
    37
  • matlab循环求和_r语言for循环计算求和

    matlab循环求和_r语言for循环计算求和题目描述编写程序求和S=a+aa+aaa+aaaa+…,其中a是1-9中的一个数字。n为一正整数,a和n均从键盘输入。(例如输入n为4,a为2,S=2+22+222+2222)输入两行整数,分别表示a,n输出一个整数样例输入Copy24样例输出Copy2468程序代码a=input(”);n=input(”);temp=0;sum=0;fori=1:ntemp=temp*10+a;sum

    2022年10月6日
    0
  • 常见学习率衰减方式

    常见学习率衰减方式学习率学习率的作用​ 在机器学习中,监督式学习通过定义一个模型,并根据训练集上的数据估计最优参数。梯度下降法是一个广泛被用来最小化模型误差的参数优化算法。梯度下降法通过多次迭代,并在每一步中最小化成本函数(cost来估计模型的参数。学习率(learningrate),在迭代过程中会控制模型的学习进度。​ 在梯度下降法中,都是给定的统一的学习率,整个优化过程中都以确定的步长进行更新,在…

    2022年6月7日
    41

发表回复

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

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