CSS 中提供了一个 opacity 属性用来设置元素的透明度,它不仅对颜色有效,对图像或者页面中其它的元素也有效。

其语法格式如下:

opacity: number;

其中 number 为一个 0~1 之间的浮点数(小数),用来表示元素的透明度,值越小则越透明(0 表示完全透明,1 表示完全不透明)。

另外,在使用 opacity 属性时,还需要注意以下几点:

    • 当一个元素定义了 opacity 属性,并且其值小于 1 时,那么它的子元素也会拥有同样的透明度;
    • 当一个元素定义了 opacity 属性,并且其值小于 1 时,将会重新定义该元素默认的 z-index 属性,如果其它的元素为非定位元素,那么该元素的堆叠级别将会高于其它元素;
    • 如果定义的 opacity 属性值超过了指定的范围,那么则截取与之最相近的值,例如 1.5 将截取为 1。

CSS——透明度的更多相关文章

  1. css的img移上去边框效果及CSS透明度

    css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...

  2. CSS透明度大汇总

    近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...

  3. 【总结】CSS透明度大汇总

    近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...

  4. 使用JavaScript设置和改变CSS透明度

    在Firefox, Safari, Chrome和Opera下的CSS透明度#myElement {opacity: .7;}IE下的CSS透明度IE下照旧有别于其他浏览器,并且目前也有三个不同版本的 ...

  5. css透明度的一些兼容测试

    前言 网站丢给了外包公司来弄,但是老外写css的时候似乎没有考虑到国内的浏览器市场,于是只用了opacity这个属性来写,当IE8-的浏览器访问的时候,浮动层就像一块大黑斑药膏贴在哪里.很显然,婀娜多 ...

  6. css透明度的设置

    Css代码 .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: ...

  7. css透明度、毛玻璃效果

    透明度: 1.opacity    背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2);   只是背景颜色透明,字体不透明 代码: .info{ backgr ...

  8. 第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...

  9. css透明度的兼容!!!

    以前总是写透明度的代码,今天弄了个弹出框要求就边框透明,于是有了下边的结论,虽然很多东西不合理了,日后找到更合理在做更新!!! html <div class="new_playerf ...

  10. Css透明度

    全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...

随机推荐

  1. 抓包整理————tcp 传输数据的基础概念[十一]

    前言 简单介绍一下tcp 数据传输. 正文 tcp 数据传输是怎么样子的呢? 比如我们在代码中写好了,connection 去连接. 然后我们用 write 去读取数据,这个时候呢,到底我们的操作系统 ...

  2. spring boot 配置文件占位符和多环境配置 [七]

    配置文件占位符 person.last-name=zhangsan person.age=${random.int} person.birth=2017/12/15 person.boss=false ...

  3. Typescript 的数据类型有哪些?

    一.是什么 typescript 和 javascript几乎一样,拥有相同的数据类型,另外在javascript基础上提供了更加实用的类型供开发使用 在开发阶段,可以为明确的变量定义为某种类型,这样 ...

  4. 开篇:Mirth Connect系统集成与数据交换引擎

    Mirth最初的目的是作为HL7接口引擎('引擎'释意:IT方面的术语,指经包装过的函数库,方便别人调用:如搜索引擎.图形引擎.物理引擎等),HL7 v2.x和HL7 v3标准通常在医疗系统间用于系统 ...

  5. 力扣657(java & python)-机器人能否返回原点(简单)

    题目: 在二维平面上,有一个机器人从原点 (0, 0) 开始.给出它的移动顺序,判断这个机器人在完成移动后是否在 (0, 0) 处结束. 移动顺序由字符串 moves 表示.字符 move[i] 表示 ...

  6. 力扣67(java)-二进制求和(简单)

    题目: 给你两个二进制字符串,返回它们的和(用二进制表示). 输入为 非空 字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1&quo ...

  7. Serverless 在阿里云函数计算中的实践

    简介: 近日,阿里云 aPaaS&Serverless 前端技术专家袁坤在 CSDN 云原生 meetup 长沙站分享了 Serverless 在阿里云函数计算 FC 的实践. 作者:CSDN ...

  8. 如何 0 改造,让单体/微服务应用成为 Serverless Application

    简介: 随着 2013 年以 Docker 为代表的容器技术.CNCF 基金会以及 K8s 的发展等,云原生开始被广大开发者所熟知.云原生时代之前还有两个阶段:一是自建 IDC 机房,二是简单地把原有 ...

  9. 5G 和云原生时代的技术下半场,视频化是最大最新的确定性

    ------------恢复内容开始------------ null ------------恢复内容结束------------

  10. Roslyn 通过 EmbedAllSources 将源代码嵌入到 PDB 符号文件中方便开发者调试

    本文来告诉大家如何在项目文件里面添加上 EmbedAllSources 属性,将自己的代码嵌入到 PDB 符号文件里面,让开发者们在调试的时候,可以看到库的源代码 是否记得 PDB 符号文件的作用?符 ...