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. 解决跨域问题之fetch的使用

    一.介绍 fetch 提供了一个获取资源的接口 (包括跨域). fetch 的核心主要包括:Request , Response , Header , Body 利用了请求的异步特性 --- 它是基于 ...

  2. Vue Mixin 的深入浅出

    mixin, 意为混入. 比如去买冰激凌,我先要一点奶油的,再来点香草的.我就可以吃一个奶油香草的冰激凌.如果再加点草莓,我可以同时吃三个口味的冰激凌. 代码表示 假设把你已有的奶油味的称为 base ...

  3. 有意思的JavaScript代码写法【持续更新,欢迎留言分享有趣代码】

    filter过滤假值 [1,2,null].fiter(Boolean) 2.Object.is 健壮的相等判断 Object.is(NaN,NaN) Object.is(+0,-0) Object. ...

  4. 力扣1773(java&python)-统计匹配检索规则的物品数量(简单)

    题目: 给你一个数组 items ,其中 items[i] = [typei, colori, namei] ,描述第 i 件物品的类型.颜色以及名称. 另给你一条由两个字符串 ruleKey 和 r ...

  5. 淘宝推荐、视频搜索背后的检索技术竟是它!深度揭秘达摩院向量检索引擎Proxima

    简介: 淘宝搜索推荐.视频搜索的背后使用了什么样的检索技术?非结构化数据检索,向量检索,以及多模态检索,它们到底解决了什么问题?今天由阿里巴巴达摩院的科学家从业务问题出发,抽丝剥茧,深度揭秘达摩院内部 ...

  6. 技术干货 | 阿里云数据库PostgreSQL 13大版本揭秘

    简介: 阿里云RDS PostgreSQL是一款兼容开源PostgreSQL的全托管云数据库产品,自2015年首次发布以来,根据用户需求不断升级迭代,已支持9.4.10.11.12等多个版本,覆盖了高 ...

  7. AI运动:阿里体育端智能最佳实践

    简介: 过去一年,阿里体育技术团队在端智能方面不断探索,特别在运动健康场景下实现了实践落地和业务赋能,这就是AI运动项目.AI运动项目践行运动数字化的理念,为运动人口的上翻提供了重要支撑,迈出了阿里体 ...

  8. 在 Dubbo3.0 上服务治理的实践

    ​简介: Dubbo 3.0 是在云原生背景下诞生的,使用 Dubbo 构建的微服务遵循云原生思想,能更好的复用底层云原生基础设施.贴合云原生微服务架构. Dubbo3.0 介绍 作者 | 十眠 自从 ...

  9. [GPT] vue 的 quasar 框架 在 layout 模版中 如何获取 子页面当前使用的 useMeta

      在 Quasar 框架中,用 Vue Router 的 meta 字段来获取子页面当前使用的 useMeta . 首先,您需要在路由配置中设置子页面的 meta 字段.例如: const rout ...

  10. [GPT] 提高个人网站的访问量的 30 种详细方式

    内容优化:提高网站的质量和价值,让用户喜欢并分享你的内容. SEO优化:通过关键词优化.网站结构优化等方式,提高搜索引擎排名. 社交媒体:在社交媒体上分享你的内容,吸引更多人来访问你的网站. 广告投放 ...