精华内容
下载资源
问答
  • opacity
    千次阅读
    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)

     

    更多相关内容
  • winopacity.opacity :窗口不透明度,范围为0-255,其中0是不可见窗口 发展须知 在安装节点模块之后运行rebuild脚本很重要。 npm install npm run rebuild 这重建了要在基于电子的应用中使用的本机模块。 但是,...
  • CSS3 opacity 属性的功能是用来控制网页元素的透明效果(调整不透明度),早期网页设计常常会用到许多的透明效果,通常都是透过 png 图层来制作透明的感觉,现在网页设计师可以使用 CSS3 opacity 属性来轻松的达到...
  • $ 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 ...
  • 在写项目页面的过程中,遇到子元素继承父元素透明度的问题,查找了好多文档给出的都是第一种方法,这种方法主要解决简单场景的,而对于设置复杂的background时,该方法不再适用。
  • CSS opacity - 实现图片半透明效果的代码
  • RGBA和opacity 语法: R:红色值。正整数 | 百分数 G:绿色值。正整数 | 百分数 B:蓝色值。正整数| 百分数 A:透明度。取值0~1之间 CSS Code复制内容到剪贴板 /* IE6 – 8 */  filter: alpha(opacity=80); ...
  • IE6不支持 opacity透明。解决办法 加上如下代码 复制代码代码如下: filter:alpha(opacity=80); 当下面两个设置如下时 浏览器透明效果才会一致 复制代码代码如下: filter:alpha(opacity=80); opacity:0.8; 或者...
  • 主要介绍了解决CSS3的opacity属性带来的层叠顺序问题的方法,主要针对opacity的属性值小于1的层会覆盖在其他层之上的问题,需要的朋友可以参考下
  • 用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持,不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari
  • CSS 图像透明度opacity想必大家并不陌生吧,使其可以让图片或者页面拥有透明效果,下面为大家讲解下CSS opacity的使用及其兼容性,感兴趣的朋友可以参考下
  • 对于设置透明度,我们有两个可以选的css3属性:rgba 和 opacity。这篇文章主要介绍了详解css透明度之rgba和opacity的区别及兼容,感兴趣的可以一起跟随小编来了解一下
  • CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,本篇文章主要介绍了详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法,有兴趣的...
  • Opacity

    2019-03-31 17:37:07
    Opacity 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属性就可以将文字放在图片上)

    在这里插入图片描述

    展开全文
  • 坐一个滤镜效果,CSS样式如下: 复制代码代码如下: .mask { width:... /* Firefox,Safari(WebKit),Opera */ -ms-filter:alpha(opacity=20); /* IE 4-7 */ zoom:1; /* set “zoom”,”width” or “height” to trigger
  • 对于每一个网站前端开发人员,常常都会遇到设置div透明度的需求,比如在实现图片幻灯片切换效果经常就需要使图片淡入淡出。本文分别对原生js和jQuery在IE和其它浏览器中设置透明度的方法和相关注意事项进行总结。
  • 1.使用rgba设置背景色的透明 效果如下: <body> 你好啊! </body> body { background-color:red; } #box{ width:200px; height:200px; margin:100px auto; ...2.使用opacity
  • 本文实例讲述了微信小程序MUI导航栏透明渐变功能。分享给大家供大家参考,具体如下: 导航栏透明渐变效果 ...2. 通过改变改view的opacity来实现透明渐变。 WXML <!--pages/scroll/scroll.wxml--> <v
  • 主要介绍了CSS中 opacity的设置影响了index(层数)的改变的问题,通过各种情况出现的问题进行了总结并附上了代码,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
  • Reference_Opacity

    2021-03-19 08:06:13
    Reference_Opacity 此作业的目标 使用具有重叠形状的填充功能来学习和练习不透明度参数。 要求 使用具有透明不透明度的填充功能创建加工草图。在加工草图中进行至少3种不同重叠形状的设计,并将其设置为透明不透明。...
  • CSS属性参考 | opacity

    2021-06-19 05:20:08
    CSS 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,即半透明的图片。在鼠标滑过这张图片时,图片变为完全不透明。

    561ccad9fef6778a29d8b2c00869c0ca.png

    img{

    opacity: 0.5;

    -webkit-transition: opacity 0.5s;

    -o-transition: opacity 0.5s;

    transition: opacity 0.5s;

    }

    img:hover{

    opacity: 1;

    }

    浏览器支持

    opacity属性的浏览器兼容性列表如下:

    9bf6a8f5d128d77653dc9d609b1764db.png

    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过滤器来制作透明度。

    相关阅读

    展开全文
  • 在群里看见有人贴出一个页面问opacity不支持IE6,有什么好的支持方法没。贴出第一眼就发现用了jq库,当场就想到了支持的。但很多人回答用CSS滤镜,当我看到这个答案的时候。有些很吃惊。难道大家都不知道JQ是支持...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 173,553
精华内容 69,421
关键字:

opacity