CSS3 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.cn/141314.html原文链接：https://javaforall.cn