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文件安装系统(使用镜像运行 ...
随机推荐
- C跟C++
工作以来几乎就只写C,下周开始的新工作可能就要开始写C++啦~ C: C++: 1.template 2.多态.重载.继承 3.虚函数 C++内存布局 看两张耗子的图片就清楚了.其中虚函数表一般放在数 ...
- hash 默认使用equal进行元素比较 防止元素重复
hash 默认使用equal进行元素比较 防止元素重复
- openstack之glance部署及操作
由于时间关系简单的架构图就先不展示了.后续的更新会贴上... 部署glance 安装memcache服务 yum install memcached python-memcached systemct ...
- javascript中var let const三种变量声明方式
javascript中var let const三种变量声明方式 1.var ①var表示声明了一个变量,并且可以同时初始化该变量. ②使用var语句声明的变量的作用域是当前执行位置的上下文:一个函 ...
- SOA,ESB,WebService的关系
1. 什么是SOA SOA(Service-Oriented Architecture)既服务导向架构,是指为了解决在inernet环境下业务集成的需要,通过连接能完成特定任务的独立功能实现的一种软件 ...
- 【刷题】BZOJ 4516 [Sdoi2016]生成魔咒
Description 魔咒串由许多魔咒字符组成,魔咒字符可以用数字表示.例如可以将魔咒字符 1.2 拼凑起来形成一个魔咒串 [1,2]. 一个魔咒串 S 的非空字串被称为魔咒串 S 的生成魔咒. 例 ...
- POJ3090:Visible Lattice Points——题解
http://poj.org/problem?id=3090 题目大意:你站在(0,0)的点上看向第一向限的点,点和点会互相阻挡,问最多看到多少点. 很容易想到,我们能看到的点,它的横纵坐标一定是互质 ...
- LOJ6342::跳一跳——题解
https://loj.ac/problem/6342 f[i]表示从i开始跳的期望时间,f[n]=0. 所以f[i]=(f[i]+f[i+1]+……+f[n])/(n-i+1)+1. 移项整理可求f ...
- [NOIP 2017]棋盘
题目描述 有一个 m×m 的棋盘,棋盘上每一个格子可能是红色.黄色或没有任何颜色的.你现在要从棋盘的最左上角走到棋盘的最右下角. 任何一个时刻,你所站在的位置必须是有颜色的(不能是无色的), 你只能向 ...
- navicat for mysql无法连接数据库和连接数据库慢的问题
首先在自己虚拟机上登录mysql: mysql -uroot -p 然后赋予权限 GRANT ALL PRIVILEGES ON *.* TO root@'%' IDENTIFIED BY '1234 ...