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
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 【解决方法】phpize 编译安装 php 扩展时出现Cannot find autoconf「建议收藏」

    【解决方法】phpize 编译安装 php 扩展时出现Cannot find autoconf「建议收藏」背景已知,编译安装php扩展的时候,需要先执行phpize来生成configure文件。但是,最近在安装扩展的时候出现了如下错误:$/path/to/php/php5.6.40/bin/phpizeConfiguringfor:PHPApiVersion:20131106ZendModuleApiNo:20131226ZendExtensionApiNo:220131226Cannotfindautoconf.Ple

  • http与socket的区别

    http与socket的区别http与socket的区别

  • 二进制数的运算方法

    二进制数的运算方法1.二进制数的算术运算二进制数的算术运算包括:加、减、乘、除四则运算,下面分别予以介绍。(1)二进制数的加法根据“逢二进一”规则,二进制数加法的法则为:0+0=00+1=1+0=11+1=0 (进位为1)1+1+1=1(进位为1)例如:1110和1011相加过程如下:(2)二进制数的减法根据“借一有二”的规则,二进制数减法的法则为:

  • 五大常用算法之三:贪心算法

    一、基本概念:所谓贪心算法是指,在对问题求解时,总是做出在当前看来是最好的选择。也就是说,不从整体最优上加以考虑,他所做出的仅是在某种意义上的局部最优解。贪心算法没有固定的算法框架,算法设计的关键

    2021年12月25日
  • javascript 跳转_iframe跳转另一个页面

    javascript 跳转_iframe跳转另一个页面 按钮式:    链接式:  返回上一步  ”>返回上一步  直接跳转式:  window.location.href=http://www.9ba.cn;  开新窗口:  云上的日子 

  • maven 菜鸟安装教程「建议收藏」

    maven 菜鸟安装教程「建议收藏」文章目录Maven是什么Maven安装Maven设置环境变量配置总结Maven是什么maven是一套用来管理jar包的软件,在Maven项目里面有个pom.xml文件,这是这个maven的配置文件,里面可以导入各种你需要导入的依赖,然后maven就能找到相关的依赖在你的本地库,本地库没有就在中央仓库下载,然后保存到本地库,十分方便Maven安装网上找到资源,一般是压缩包,解压即用Maven设置软件–>conf–>setting.xml进入setting.xm

发表回复

您的电子邮箱地址不会被公开。

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