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. openGauss Cluster Manager RTO Test

    一.环境介绍 软件环境 类别 版本 下载链接 备注 OS openEuler 20.03 (LTS) https://repo.openeuler.org/openEuler-20.03-LTS/IS ...

  2. CentOS 7快速安装配置 Odoo 12

    > Coding > CentOS 7快速安装配置 Odoo 12 CentOS 7快速安装配置 Odoo 12 Coding  Alan  11个月前 (10-19)  4777次浏览  ...

  3. UML 哲学之道——概况篇[二]

    前言 简单介绍一下uml的概况篇. 正文 UML 概述: url 包括: 事物 关系 图 扩展机制 事物: 结构: 类.接口.构件.节点等等 行为:交互.状态等等 分组:包.子系统等等 注释:注释 关 ...

  4. AI极速批量换脸!Roop-unleashed下载介绍,可直播

    要说AI换脸领域,最开始火的项目就是Roop了,Roop-unleashed作为Roop的嫡系分支,不仅继承了前者的强大基因,更是在功能上实现了重大突破与升级 核心特性 1.可以进行高精度的图片.视频 ...

  5. js 校验手机号与校验邮箱正则表达式

    js 校验手机号与校验邮箱正则表达式 以下 checkMobile(mobile) { var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+ ...

  6. 力扣603(MySQL)-连续空余座位(简单)

    题目: 几个朋友来到电影院的售票处,准备预约连续空余座位. 你能利用表 cinema ,帮他们写一个查询语句,获取所有空余座位,并将它们按照 seat_id 排序后返回吗? 对于如上样例,你的查询语句 ...

  7. CF1535F String Distance

    \(CF1535F\ \ String\ Distance\) 题意 给 \(n\) 个长度均为 \(len\) 的字符串 \(T_1,T_2,\dots T_n\),定义 \(f(a,b)\) 为将 ...

  8. Spring Boot Serverless 实战系列“架构篇” | 光速入门函数计算

    ​简介:如何以 Serverless 的方式运行 Spring Boot 应用? ​ 作者:西流(阿里云函数计算专家) Spring Boot 是基于 Java Spring 框架的套件,它预装了 S ...

  9. [DOT] Polkadot-js 的官方资源

    官网:https://polkadot.js.org/ 浏览器扩展(即钱包, 等同以太坊的MetaMask):https://polkadot.js.org/extension/ 钱包的作用方便你管理 ...

  10. [Caddy2] cloudflare, acme: cleaning up failed: no memory of presenting a DNS record

    使用 cloudflare 做为 DNS 之后,使用 Caddy 申请 Lets Encrypt 证书. 有时在日志里会发现一系列的提示信息: acme: use dns-01 solver acme ...