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)
上一篇 2022年5月26日 上午9:00
下一篇 2022年5月26日 上午9:00


相关推荐

  • VS2013下串口数据char型转COleVariant问题[通俗易懂]

    VS2013下串口数据char型转COleVariant问题[通俗易懂]在串口需要发送一串字符数组buf[]时,COleVariant(buf)强制转换失效(在vc6.0环境中是允许的)。在VS2013环境下需要借助CByteArray类型进行中间的装换,实现代码如下:首先定义:CByteArraym_array;将char型数组中的数值赋值到m_array中 for(inti=0;im_array[i]=sbuf[i]; 

    2022年7月18日
    19
  • MapReduce-Counters含义

    MapReduce-Counters含义16 03 2415 13 39INFOmapred Job Counters 49 nbsp nbsp nbsp nbsp FileSystemCo nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp FILE Numberofbyte 278 nbsp job 读取本地文件系统的文件字节数 假定我们当前 map 的输入数据都来自于 HDFS 那么在 map 阶段 这个数据应该是 0 但 nbsp nbsp nbsp re

    2026年3月19日
    2
  • java电驴_java写的电驴下载完成关机小程序

    java电驴_java写的电驴下载完成关机小程序经常用到电驴下载资料 一些 http 你根本找不到的资源 当然速度是不能恭维了 驴子么 干的就是慢活 热门资源除外 我用的 verycd 版的电驴 原版电驴的一种 mods 电驴貌似有 N 多版本 不过我觉得 verycd 的就够用了 毕竟国内八成的人都在用 最近在下新东方的新概念英语教程 进度 87 眼看要下完了 等要等 1 个多小时 下载完成又不自动关机 很是苦恼 虽然 verycd 一直提倡共享互联网 下载完成关机也

    2026年3月18日
    4
  • Java中创建对象数组[通俗易懂]

    Java中创建对象数组[通俗易懂]1.对象数组的概念:如果一个数组中的元素是对象类型,则称该数组为对象数组。当需要一个类的多个对象时,应该用该类的对象数组来表示,通过改变下标值就可以访问到不同的对象。2.对象数组的定义和使用:对象数组的定义与一般数组的定义类似,但是需要为每一个元素实例化。3.对象数组的实例化:类名[]对象数组名=new类名[数组大小]以创建Student类的对象数组为例Student[]stu=newStudent[20];//创建20个学生对象对学生类的每一个数组元素进行

    2022年7月16日
    58
  • 常用模块(模块初步了解)

    常用模块及功能说明:模块功能详解collections模块1.namedtuple:生成可以使用名字来访问元素内容的tuple我们知道tuple可以表示不变集合,例如,一个点的二维坐标就可以

    2022年3月29日
    43
  • 时滞_时滞现象名词解释

    时滞_时滞现象名词解释延迟微分方程matlab提供了dde23求解非中性微分方程。dde23的调用格式如下:sol=dde23(ddefun,lags,history,tspan)lags是延迟量,比如方程中包含y1(t-0.2)和y2(t-0.3)则可以使用lags=[0.2,0.3]。这里的ddefun必须采用如下的定义方式:dydt=ddefun(t,y,Z)其中的Z(:,1)就是y(t-la…

    2022年10月1日
    5

发表回复

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

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