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. MogDB/openGauss访问控制简介

    MogDB/openGauss 访问控制简介 SQL 可以针对不同的数据库对象赋予不同的权限,这样就可以限制用户对数据的不必要访问,提高数据访问的安全性.常见的 SQL 权限如下: SELECT/UP ...

  2. HDC 2022重磅首发《鸿蒙生态应用开发白皮书》,附全文

    原文:https://mp.weixin.qq.com/s/sEicsV_82770nAlcSCzwIw,点击链接查看更多技术内容.   11月4-6日,华为开发者大会2022(HDC)在东莞松山湖举 ...

  3. 第十三篇:HTML和CSS入门

    一.HTML本质以及在WEB程序中的作用 1.一套规则,浏览器认识的规则. 2.开发者: 学习html规则 开发后台程序 - 写html文件(充当模板的作用) - 数据库获取数据,然后替换到html文 ...

  4. 重新整理数据结构与算法(c#)—— 算法套路动态规划算法[二十六]

    前言 动态规划算法的核心思想是:将大问题划分为小问题进行解决,从而一步步获取最优解的处理算法. 这样一听和分治算法有点相似啊. 是的,分治算法也是将大问题分为小问题,但是他们毕竟不同,不同之处在什么地 ...

  5. 重新整理数据结构与算法(c#)—— 算法套路分治算法[二十五]

    前言 有一个汉罗塔的游戏如下: 汉诺塔:汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具. 大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘. 大梵天 ...

  6. 鸿蒙HarmonyOS实战-ArkUI组件(Image)

    一.Image 在HarmonyOS中,Image组件是用于显示图像文件的UI组件.它可以显示本地图像文件或远程URL地址的图像文件.Image组件的实现方式比较简单,只需提供图像文件路径或URL地址 ...

  7. Vue3开源组件库

    最近收到的很多问题都是关于Vue3组件库的问题 今天就给大家推荐几个基于Vue3重构的开源组件库 目前状态都处于Beta阶段,建议大家抱着学习的心态入场,勿急于用到生产环境 Ant-design-vu ...

  8. 【译】Visual Studio Enterprise 中的代码覆盖率特性

    通过使用代码覆盖率功能,您可以发现您的测试需要改进的地方,并使您的软件更加健壮和可靠.在这篇文章中,我们将介绍我们在 Visual Studio Enterprise 2022 中引入的 Code C ...

  9. 兼容ie8问题

    <!-- 让IE8/9支持媒体查询,从而兼容栅格 --><!--[if lt IE 9]><script src="https://cdn.staticfile ...

  10. C++里也有菱形运算符?

    最近在翻<c++函数式编程>的时候看到有一小节在说c++14新增了"菱形运算符".我寻思c++里好像没什么运算符叫这名字啊,而且c++14新增的功能很少,我也不记得有添 ...