csc_滤镜filter和实现透明的两种方式
有这样一个需求，给一个地图实现半透明效果。
使用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和实现透明的两种方式的更多相关文章
- CSS设置透明的两种方式
1..demo{ background-color:transparent; } 2..demo{ background-color:rgba(0,0,0,0.5); //最后一个参数是用来设置透明度 ...
- css实现透明的两种方式及其区别
一.opacity:0~1 值越高,透明度越低,下面为示例 选择器{ opacity:0.5 } 选择器匹配到的节点们,包括节点们的孩子节点,都会实现%50透明,另 0.5 可直接写成 .5 二.rg ...
- 【SpringBoot】04.SpringBoot整合Filter的两种方式
SpringBoot整合Filter过滤器的两种方式: 1.通过扫描注解完成Filter组件注册 创建一个类,实现Filter接口,实现doFilter()方法 在该类使用注解@WebFilter,设 ...
- 设置div背景透明的两种方法
实现div背景透明的两种方法 1.使用opacity属性 background-color:#000; opacity: 0.5; 这样做可以设置div内部所以区域的透明度,但是也会影响里面的文字,效 ...
- spring boot 集成 Filter 的两种方式
两种方式:(两种方式同时存在时,@Bean优先@ServletComponentScan实例化,生成两个对象) 1)@ServletComponentScan注解+@WebFilter注解 2)@Be ...
- System.Web.Http.Cors配置跨域访问的两种方式
System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...
- 通过属性 Cesium的FBO主要支持两种方式
角色其实就是一类权限的分组,所以给用户分配角色其实也是在给用户分配权限.在oracle中有三个比较常用的角色.对于一般不是很严格的系统可以授予开发用户CONNECT.RESOURCE角色权限即可. 其 ...
- Android手机上监听短信的两种方式
Android手机上监听短信有两种方式: 1. 接受系统的短信广播,操作短信内容. 优点:操作方便,适合简单的短信应用. 缺点:来信会在状态栏显示通知信息. AndroidManifest.xml: ...
- Docker镜像构建的两种方式
关于Docker里面的几个主要概念 这里用个不太恰当的比方来说明. 大家肯定安装过ghost系统,镜像就像是ghost文件,容器就像是ghost系统.你可以拿别人的ghost文件安装系统(使用镜像运行 ...
随机推荐
- binlog2sql数据恢复
牛叉的工具有好几个,包括MyFlash.binlog2Sql.mysqlbinlog_flashback,还有一些收费的等等,各有优劣,具体使用可自行百度 1.安装binlog2sql shell&g ...
- BZOJ4299 Codechef FRBSUM（主席树）
感觉非常不可做,于是考虑有什么奇怪的性质. 先考虑怎么求子集和mex.将数从小到大排序,假设已经凑出了0~n的所有数,如果下一个数>n+1显然mex就是n+1了,否则若其为x则可以凑出1~n+x ...
- [洛谷P4900]食堂
题目大意:$n(n\leqslant10^6)$组询问,每组询问给出$l,r(l,r\leqslant10^6)$,求($\{\dfrac ij\}$表示$\dfrac ij$的小数部分): $$\s ...
- Android 内核--Context对象
Context(在Android中翻译为场景):一个Activity就是一个Context,一个Service也是一个Context,应用程序中有多少个Activity或者Service,就会有多少个 ...
- bzoj4390: [Usaco2015 dec]Max Flow(LCA+树上差分)
题目大意:给出一棵树,n(n<=5w)个节点,k(k<=10w)次修改,每次给定s和t,把s到t的路径上的点权+1,问k次操作后最大点权. 对于每次修改,给s和t的点权+1,给lca(s, ...
- 解决requests获取源代码时中文乱码问题
用requests获取源代码时,如果是中文网页,就可能会出现乱码,下面我以中关村的网站为例: import requests url = 'http://desk.zol.com.cn/meinv/' ...
- 怎么使用formBuilder以拖拽方式编写页面
1.以admin用户登录系统,打开formbuilder http://localhost:8081/framework/main/formbuilder 2.从右方组件中,用鼠标拖拽页面所需的组件到 ...
- hdu 5620
KK's Steel Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- Educational Codeforces Round 6 C
C. Pearls in a Row time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- layer 限定时间消失
默认tips层几秒后自动关闭.请问如何实现类似页面层时,点击页面层外部遮罩手动关闭的效果? 下面我加了time: 20000 时间控制在20秒后自动关闭,但是显得比较呆板,不如用户手动点击关闭来的灵活 ...