CSS——透明度
CSS 中提供了一个 opacity 属性用来设置元素的透明度,它不仅对颜色有效,对图像或者页面中其它的元素也有效。
其语法格式如下:
opacity: number;
其中 number 为一个 0~1 之间的浮点数(小数),用来表示元素的透明度,值越小则越透明(0 表示完全透明,1 表示完全不透明)。
另外,在使用 opacity 属性时,还需要注意以下几点:
- 当一个元素定义了 opacity 属性,并且其值小于 1 时,那么它的子元素也会拥有同样的透明度;
- 当一个元素定义了 opacity 属性,并且其值小于 1 时,将会重新定义该元素默认的 z-index 属性,如果其它的元素为非定位元素,那么该元素的堆叠级别将会高于其它元素;
- 如果定义的 opacity 属性值超过了指定的范围,那么则截取与之最相近的值,例如 1.5 将截取为 1。
CSS——透明度的更多相关文章
- css的img移上去边框效果及CSS透明度
css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...
- CSS透明度大汇总
近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...
- 【总结】CSS透明度大汇总
近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...
- 使用JavaScript设置和改变CSS透明度
在Firefox, Safari, Chrome和Opera下的CSS透明度#myElement {opacity: .7;}IE下的CSS透明度IE下照旧有别于其他浏览器,并且目前也有三个不同版本的 ...
- css透明度的一些兼容测试
前言 网站丢给了外包公司来弄,但是老外写css的时候似乎没有考虑到国内的浏览器市场,于是只用了opacity这个属性来写,当IE8-的浏览器访问的时候,浮动层就像一块大黑斑药膏贴在哪里.很显然,婀娜多 ...
- css透明度的设置
Css代码 .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: ...
- css透明度、毛玻璃效果
透明度: 1.opacity 背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2); 只是背景颜色透明,字体不透明 代码: .info{ backgr ...
- 第二季第十一天 html5语义化标签 css透明度
span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...
- css透明度的兼容!!!
以前总是写透明度的代码,今天弄了个弹出框要求就边框透明,于是有了下边的结论,虽然很多东西不合理了,日后找到更合理在做更新!!! html <div class="new_playerf ...
- Css透明度
全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...
随机推荐
- HDC2021技术分论坛:OpenHarmony驱动框架解读和开发实践
转自:OpenAtom OpenHarmony 作者:yuanbo,华为高级工程师 在IoT时代下,终端设备差异较大.形态各异.尺寸各异.交互方式各异,解决设备适配问题无疑是实现万物互联的一个关 ...
- HDC2021技术分论坛:跨端分布式计算技术初探
作者:zhengkai,分布式通信首席技术专家 当今的移动应用都向着智能化和多样化方向发展,例如AI辅助,VR/AR应用,沉浸式游戏等.然而现实中的移动设备,因为便携性要求受限于尺寸.电池容量以及温控 ...
- 直播预告丨Hello HarmonyOS进阶课程第四课——ArkUI动画开发
为了帮助初识HarmonyOS的开发者快速入门,我们曾推出Hello HarmonyOS系列课程,从最基础的配置IDE和创建Hello World开始,详细介绍HarmonyOS基础.开发环境搭建.I ...
- 【VMware vCenter】使用Reduced Downtime Update (RDU)升级更新vCenter Server。
Reduced Downtime Upgrade (RDU) 减少停机时间更新是用于vCenter Server更新升级的一种新的方式,顾名思义,主要目的就是为了减少在vCenter Server更新 ...
- sql 语句系列(字符串之裂开)[八百章之第十三章]
创建分割列表 一张表: 先查询出来的效果是这样的: mysql: select emp_copy.deptno,GROUP_CONCAT(emp_copy.emps SEPARATOR ',') fr ...
- 重新整理.net core 计1400篇[八] (.net core 中的依赖注入的深入理解)
生命周期策略 在实例Transient 和 Scoped 中,所以实现Idisposable 接口的服务实例会被当前IServiceProvider 对象保存起来,当IService 对象的Dispo ...
- 《Effective C#》系列之(四)——最小化内存泄露和资源占用
一.内存泄露 在<Effective C#>这本书中,最小化资源泄漏是其中一章的内容.以下是该章节的一些核心建议,以及使用C#代码示例说明: 及时释放非托管资源:在使用非托管资源时,需要手 ...
- HL7传输协议
HL7消息通过各种TCP/IP传输发送,其中一些包括: 下层协议(LLP) 文件传输协议(FTP) 简单对象访问协议(SOAP) 简单邮件传输协议(SMTP) 尽管HL7可以使用多种传输协议进行数据传 ...
- 开箱即用!Linux 内核首个原生支持,让你的容器体验飞起来!| 龙蜥技术
简介: 本文将从 Nydus 架构回顾.RAFS v6 镜像格式和 EROFS over Fscache 按需加载技术三个角度来分别介绍这一技术的演变历程. 文/阿里云内核存储团队,龙蜥社区高性能存储 ...
- Delta Lake基础介绍(商业版)
简介:介绍 Lakehouse 搜索引擎的设计思想,探讨其如何使用缓存,辅助数据结构,存储格式,动态文件剪枝,以及 vectorized execution 达到优越的处理性能. 作者:李洁杏,Da ...