-
2020-02-06 15:49:09
1. 作用
设置元素的透明背景
2. 取值
(1) 取值范围0~1
(2) 0表示完全透明,1表示完全不透明,0.5表示半透明
3. 示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>opacity</title> <style type="text/css"> .box1 { width: 200px; height: 200px; background-color: red; position: relative; z-index: 1; opacity: 0.6; } .box2 { width: 200px; height: 200px; background-color: yellow; position: absolute; left: 100px; top: 100px; z-index: 2; opacity: 0.5; } .box3 { width: 200px; height: 200px; background-color: yellowgreen; position: relative; left: 200px; z-index: 3; opacity: 0.4; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
4. 注意
在IE8及以下的浏览器不支持,需要通过以下属性代替,取值范围为0~100
filter:alpha(opacity=50)
更多相关内容 -
vscode-win-opacity:更改Windows上Visual Studio Code窗口的不透明度
2021-05-06 04:34:34winopacity.opacity :窗口不透明度,范围为0-255,其中0是不可见窗口 发展须知 在安装节点模块之后运行rebuild脚本很重要。 npm install npm run rebuild 这重建了要在基于电子的应用中使用的本机模块。 但是,... -
详解CSS3的opacity属性设置透明效果的用法
2021-01-21 14:12:51CSS3 opacity 属性的功能是用来控制网页元素的透明效果(调整不透明度),早期网页设计常常会用到许多的透明效果,通常都是透过 png 图层来制作透明的感觉,现在网页设计师可以使用 CSS3 opacity 属性来轻松的达到... -
leaflet-layer-opacity-control:基于seiyria的bootstrap-slider的Leaflet图层的基本不透明度控件
2021-04-27 17:38:11$ bower install leaflet-layer-opacity-control 在您的网页中,同时包含分发脚本和样式表。 例如, < link rel =" stylesheet " href =" leaflet-layer-opacity-control.css " > </ link > < ... -
Opacity.js
2020-12-09 20:35:37代码如下://————————————————————— // Opacity Displayer, Version 1.0 // Copyright Michael Lovitt, 6/2002. // Distribute freely, but please leave this notice ... -
详解CSS-opacity子元素继承父元素透明度的解决方法
2020-11-19 12:42:34在写项目页面的过程中,遇到子元素继承父元素透明度的问题,查找了好多文档给出的都是第一种方法,这种方法主要解决简单场景的,而对于设置复杂的background时,该方法不再适用。 -
CSS opacity - 实现图片半透明效果的代码
2020-10-30 23:19:40CSS opacity - 实现图片半透明效果的代码 -
CSS3中的opacity属性使用教程
2020-12-13 13:34:19RGBA和opacity 语法: R:红色值。正整数 | 百分数 G:绿色值。正整数 | 百分数 B:蓝色值。正整数| 百分数 A:透明度。取值0~1之间 CSS Code复制内容到剪贴板 /* IE6 – 8 */ filter: alpha(opacity=80); ... -
IE6不支持opacity半透明 BUG的解决方法
2020-12-10 07:52:20IE6不支持 opacity透明。解决办法 加上如下代码 复制代码代码如下: filter:alpha(opacity=80); 当下面两个设置如下时 浏览器透明效果才会一致 复制代码代码如下: filter:alpha(opacity=80); opacity:0.8; 或者... -
解决CSS3的opacity属性带来的层叠顺序问题
2020-09-24 22:18:10主要介绍了解决CSS3的opacity属性带来的层叠顺序问题的方法,主要针对opacity的属性值小于1的层会覆盖在其他层之上的问题,需要的朋友可以参考下 -
CSS3中的Opacity多浏览器透明度兼容性问题
2020-09-24 23:43:37用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持,不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari -
CSS 图像透明度opacity兼容性介绍
2020-09-25 06:26:51CSS 图像透明度opacity想必大家并不陌生吧,使其可以让图片或者页面拥有透明效果,下面为大家讲解下CSS opacity的使用及其兼容性,感兴趣的朋友可以参考下 -
详解css透明度之rgba和opacity的区别及兼容
2020-09-22 11:56:07对于设置透明度,我们有两个可以选的css3属性:rgba 和 opacity。这篇文章主要介绍了详解css透明度之rgba和opacity的区别及兼容,感兴趣的可以一起跟随小编来了解一下 -
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2020-09-22 11:44:09CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,本篇文章主要介绍了详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法,有兴趣的... -
Opacity
2019-03-31 17:37:07Opacity Opacity属性是CSS中一个有趣的属性,它的作用是使图像变得透明,让图像带上透明度,这就使图像的观赏变得完全不同。 为opacity属性设置不同的数值,其呈现的透明度也就不同。 opacity属性的数值从0~1。 代码...Opacity
Opacity属性是CSS中一个有趣的属性,它的作用是使图像变得透明,让图像带上透明度,这就使图像的观赏变得完全不同。
为opacity属性设置不同的数值,其呈现的透明度也就不同。
opacity属性的数值从0~1。代码:
<style> .one{ opacity: 1; } .two{ opacity: 0.8; } .three{ opacity: 0.5; } .five{ opacity: 0.3; } p.five_p{ position: absolute; font-size: 50px; color: red; } </style> <body style="background: #FCF9F2;"> <div style="margin: 150px;"> <p>one</p><img class="one" src="img/hua.jpg" alt=""> <p>two</p><img class="two" src="img/hua.jpg" alt=""> <p>three</p><img class="three" src="img/hua.jpg" alt=""> <div class="four" style="position: relative"> <p class="five_p">five</p> <img class="five" src="img/hua.jpg" alt=""> </div> </div> </body>
显示截图:
opacity: 1;
opacity: 0.8;
opacity: 0.5;
opacity: 0.3;
这种带有透明性的图片可以用作背景,常见的有文字背景。(给文字设置position属性就可以将文字放在图片上) -
IE8 滤镜效果filter:alpha(opacity=20);IE下失效出现黑色
2020-12-04 08:39:47坐一个滤镜效果,CSS样式如下: 复制代码代码如下: .mask { width:... /* Firefox,Safari(WebKit),Opera */ -ms-filter:alpha(opacity=20); /* IE 4-7 */ zoom:1; /* set “zoom”,”width” or “height” to trigger -
js和jQuery设置Opacity半透明 兼容IE6
2020-10-22 07:21:35对于每一个网站前端开发人员,常常都会遇到设置div透明度的需求,比如在实现图片幻灯片切换效果经常就需要使图片淡入淡出。本文分别对原生js和jQuery在IE和其它浏览器中设置透明度的方法和相关注意事项进行总结。 -
css中使用rgba和opacity设置透明度的区别(附图)
2020-12-30 01:35:471.使用rgba设置背景色的透明 效果如下: <body> 你好啊! </body> body { background-color:red; } #box{ width:200px; height:200px; margin:100px auto; ...2.使用opacity -
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2020-12-29 15:51:08本文实例讲述了微信小程序MUI导航栏透明渐变功能。分享给大家供大家参考,具体如下: 导航栏透明渐变效果 ...2. 通过改变改view的opacity来实现透明渐变。 WXML <!--pages/scroll/scroll.wxml--> <v -
CSS中 opacity的设置影响了index(层数)的改变的问题总结(推荐)
2020-09-27 21:53:05主要介绍了CSS中 opacity的设置影响了index(层数)的改变的问题,通过各种情况出现的问题进行了总结并附上了代码,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。 -
Reference_Opacity
2021-03-19 08:06:13Reference_Opacity 此作业的目标 使用具有重叠形状的填充功能来学习和练习不透明度参数。 要求 使用具有透明不透明度的填充功能创建加工草图。在加工草图中进行至少3种不同重叠形状的设计,并将其设置为透明不透明。... -
CSS属性参考 | opacity
2021-06-19 05:20:08CSS opacity 属性用于指定一个元素的透明度。换句话来说,opacity属性用于控制元素背后的背景的可见程度。opacity属性使用值来作为元素透明度的级别。数值的范围在0-1之间。透明度值为1是元素默认的透明度级别,它...CSS opacity 属性用于指定一个元素的透明度。换句话来说,opacity属性用于控制元素背后的背景的可见程度。
opacity属性使用值来作为元素透明度的级别。数值的范围在0-1之间。透明度值为1是元素默认的透明度级别,它表示元素完全不透明。透明度为0表示元素完全透明。
当一个元素的透明度数值越接近0时,它后面的背景就看得越清楚。
当opacity属性应用在某个元素上时,是把这个元素(包括它的内容)当成一个整体来看待,即使透明度的值没有被该元素的子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的opacity属性值。
使用opacity属性,当属性值不为1时,会把元素放置在一个新的堆叠上下文中。
opacity属性和visibility属性具有相同的效果,它们都会使元素变得完全透明,而不会影响页面的布局,透明元素仍然会占据它原来所在的位置。
使用opacity属性可以制作元素的淡入淡出动画效果。opacity属性是极少数能够被GPU管理的CSS属性之一,因此使用opacity属性制作的动画速度可以更快。
官方语法
opacity:
参数:
:使用值来指定透明度的级别。值在0-1之间。1表示元素完全不透明。0表示元素完全透明。0.5表示元素半透明。
opacity属性的初始值为1。
应用范围
opacity属性可以应用所有元素上。
示例代码
/* 完全不透明 */
opacity: 1;
opacity: 1.0;
/* 半透明 */
opacity: 0.5;
/* 完全透明 */
opacity: 0.0;
opacity: 0;
opacity: inherit;
由于IE8以下的IE浏览器不支持opacity属性,因此要制作跨浏览器的透明度设置可以使用下面的代码:
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
在线演示
下面的例子演示了一张图片的透明度为0.5,即半透明的图片。在鼠标滑过这张图片时,图片变为完全不透明。
img{
opacity: 0.5;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
img:hover{
opacity: 1;
}
浏览器支持
opacity属性的浏览器兼容性列表如下:
Internet Explorer9之前的IE浏览器不支持opacity属性,但是支持非标准的filter属性。IE 5-7支持filter: alpha(opacity=xx)。IE8-9支持扩展的progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)。扩展格式对于IE8-9更有效,但是也可以使用filter: alpha(opacity=xx)。在IE8中引入了-ms-filter,它的意义和filter相同。
IE9之后的IE浏览器不再需要使用filter过滤器来制作透明度。
相关阅读
-
IE6下opacity与JQuery的奇妙结合
2020-10-27 15:42:36在群里看见有人贴出一个页面问opacity不支持IE6,有什么好的支持方法没。贴出第一眼就发现用了jq库,当场就想到了支持的。但很多人回答用CSS滤镜,当我看到这个答案的时候。有些很吃惊。难道大家都不知道JQ是支持...