有这样一个需求，给一个地图实现半透明效果。

使用css滤镜属性可以实现：filter。

下面是属性的所以值

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #filter {

                 float: left;

                 height: 500px;

                 width: 500px;

                 background: red;

                 -webkit-filter: grayscale(30%);

                 /* Chrome, Safari, Opera */

                 filter: grayscale(30%);

             }

             #filter02 {

                 float: left;

                 height: 500px;

                 width: 500px;

                 background: red;

                 -webkit-filter: opacity(30%);

                 /* Chrome, Safari, Opera */

                 filter: opacity(30%);

             }

             /*所以css语法

             filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();*/

         </style>

     </head>

     <body>

         <div id="filter"></div>

         <div id="filter02"></div>

     </body>

 </html>
实现半透明的两种方式
rgba(0,0,0,.45)

opacity: .45;

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #rgba01{

                 float: left;

                 height: 500px;

                 width: 500px;

                 background: rgba(0,0,0,.45);

             }

             #rgba02{

                 float: left;

                 height: 500px;

                 width: 500px;

                 background: #000000;

                 opacity: .45;

             }

         </style>

     </head>

     <body>

         <div id="rgba01"></div>

         <div id="rgba02"></div>

     </body>

 </html>
 
												


											
csc_滤镜filter和实现透明的两种方式的更多相关文章
	

    
								
  1. CSS设置透明的两种方式
		
    1..demo{ background-color:transparent; } 2..demo{ background-color:rgba(0,0,0,0.5); //最后一个参数是用来设置透明度 ...
    
		
    2. 
						
  2. css实现透明的两种方式及其区别
		
    一.opacity:0~1 值越高,透明度越低,下面为示例 选择器{ opacity:0.5 } 选择器匹配到的节点们,包括节点们的孩子节点,都会实现%50透明,另 0.5 可直接写成 .5 二.rg ...
    
		
    3. 
						
  3. 【SpringBoot】04.SpringBoot整合Filter的两种方式
		
    SpringBoot整合Filter过滤器的两种方式: 1.通过扫描注解完成Filter组件注册 创建一个类,实现Filter接口,实现doFilter()方法 在该类使用注解@WebFilter,设 ...
    
		
    4. 
						
  4. 设置div背景透明的两种方法
		
    实现div背景透明的两种方法 1.使用opacity属性 background-color:#000; opacity: 0.5; 这样做可以设置div内部所以区域的透明度,但是也会影响里面的文字,效 ...
    
		
    5. 
						
  5. spring boot 集成 Filter 的两种方式
		
    两种方式:(两种方式同时存在时,@Bean优先@ServletComponentScan实例化,生成两个对象) 1)@ServletComponentScan注解+@WebFilter注解 2)@Be ...
    
		
    6. 
						
  6. System.Web.Http.Cors配置跨域访问的两种方式
		
    System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...
    
		
    7. 
						
  7. 通过属性 Cesium的FBO主要支持两种方式
		
    角色其实就是一类权限的分组,所以给用户分配角色其实也是在给用户分配权限.在oracle中有三个比较常用的角色.对于一般不是很严格的系统可以授予开发用户CONNECT.RESOURCE角色权限即可. 其 ...
    
		
    8. 
						
  8. Android手机上监听短信的两种方式
		
    Android手机上监听短信有两种方式: 1. 接受系统的短信广播,操作短信内容. 优点:操作方便,适合简单的短信应用. 缺点:来信会在状态栏显示通知信息. AndroidManifest.xml:  ...
    
		
    9. 
						
  9. Docker镜像构建的两种方式
		
    关于Docker里面的几个主要概念 这里用个不太恰当的比方来说明. 大家肯定安装过ghost系统,镜像就像是ghost文件,容器就像是ghost系统.你可以拿别人的ghost文件安装系统(使用镜像运行 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Gitkraken系列-Gitkraken修改用户名
			
    修改用户名 为了方便项目中代码的管理,需要重新编辑用户名. 点击右上角的图像即可看到如下图 3‑1所示的下拉菜单,鼠标悬于Profile上,会出现一个Edit按钮. 图 3‑1 编辑个人信息 点击Ed ...
    
			
    2. 
						
  2. [CLR via C#]基元类型
			
    一.什么是基元类型 某些数据类型如此常用,以至于许多编译器允许代码以简化的语法来操纵它们.例如,可以使用以下语法来分配一个整数: System.Int32 a = new System.Int32() ...
    
			
    3. 
						
  3. 【bzoj1738】[Usaco2005 mar]Ombrophobic Bovines 发抖的牛  Floyd+二分+网络流最大流
			
    题目描述 FJ's cows really hate getting wet so much that the mere thought of getting caught in the rain m ...
    
			
    4. 
						
  4. Trie字典树的学习及理解
			
    字典树详解见此 我这里学习时主要是看了李煜东的进阶指南里的讲解,以下是书中介绍的内容. Trie,又称字典树,是一种用于实现字符串快速检索的多叉树结构,Tire的每个节点都拥有若干个字符指针,若在插入 ...
    
			
    5. 
						
  5. python 深浅copy的例子
			
    1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象.2. copy.deepcopy 深拷贝 拷贝对象及其子对象一个很好的例子:import copya = [1, 2, 3, ...
    
			
    6. 
						
  6. CentOS scp远程拷贝
			
    scp(secure copy)是一个基于 SSH 协议在网络之间进行安全传输的命令, 其格式为“scp [参数] 本地文件 远程帐户@远程 IP 地址:远程目录”. 1.主要参数 -v 显示详细的连 ...
    
			
    7. 
						
  7. [洛谷P4168][Violet]蒲公英
			
    题目大意:有$n(n\leqslant4\times10^4)$个数,$m(m\leqslant5\times10^4)$个询问,每次问区间$[l,r]$内的众数,若相同输出最小的,强制在线. 题解: ...
    
			
    8. 
						
  8. BZOJ5340 & 洛谷4564 & LOJ2552：[CTSC2018]假面——题解
			
    https://www.lydsy.com/JudgeOnline/problem.php?id=5340 https://www.luogu.org/problemnew/show/P4564 ht ...
    
			
    9. 
						
  9. BZOJ5285 & 洛谷4424 & UOJ384：[HNOI/AHOI2018]寻宝游戏——题解
			
    https://www.lydsy.com/JudgeOnline/problem.php?id=5285 https://www.luogu.org/problemnew/show/P4424 ht ...
    
			
    10. 
						
  10. 洛谷 P2323 [HNOI2006]公路修建问题 解题报告
			
    P2323 [HNOI2006]公路修建问题 题目描述 输入输出格式 输入格式: 在实际评测时,将只会有m-1行公路 输出格式: 思路: 二分答案 然后把每条能加的大边都加上,然后加小边 但在洛谷的题 ...
    
			
    11.